Color: #3b82f6 (Blue)
Background: #ffffff (White)

Contrast Ratio: 4.52:1

WCAG Compliance:
✓ Normal text AA (4.5:1 required) - PASS
✗ Normal text AAA (7:1 required) - FAIL
✓ Large text AA (3:1 required) - PASS
✓ Large text AAA (4.5:1 required) - PASS
✓ UI Components (3:1 required) - PASS

Recommendation:
For AAA compliance with normal text, use #2563eb (darker blue)
New contrast: 7.02:1 - Passes all requirements

/* Generate 50-900 scale from base color */
:root {
  /* Base color: #3b82f6 */

  --color-blue-50: #eff6ff;   /* 90% lighter */
  --color-blue-100: #dbeafe;  /* 80% lighter */
  --color-blue-200: #bfdbfe;  /* 60% lighter */
  --color-blue-300: #93c5fd;  /* 40% lighter */
  --color-blue-400: #60a5fa;  /* 20% lighter */
  --color-blue-500: #3b82f6;  /* Base */
  --color-blue-600: #2563eb;  /* 20% darker */
  --color-blue-700: #1d4ed8;  /* 40% darker */
  --color-blue-800: #1e40af;  /* 60% darker */
  --color-blue-900: #1e3a8a;  /* 80% darker */
}

/* Usage guide:
 * 50-100: Backgrounds, subtle highlights
 * 200-300: Hover states, borders
 * 400-600: Primary UI, text on light backgrounds
 * 700-900: Text, emphasis, dark themes
 */

/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-complement: #f6823b;   /* Orange (30°) - opposite */
}

/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-analogous-1: #3bf6db;  /* Cyan (180°) */
  --color-analogous-2: #823bf6;  /* Purple (270°) */
}

/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-triadic-1: #f6db3b;    /* Yellow (90°) */
  --color-triadic-2: #db3bf6;    /* Magenta (330°) */
}

/* Base: #3b82f6 (Blue) */
:root {
  --color-primary: #3b82f6;      /* Blue (210°) */
  --color-split-1: #f6db3b;      /* Yellow-Orange (45°) */
  --color-split-2: #f6493b;      /* Red-Orange (15°) */
}

:root {
  /* Backgrounds - Lightest colors */
  --color-bg: #ffffff;           /* Pure white */
  --color-bg-secondary: #f9fafb; /* Near white */
  --color-bg-tertiary: #f3f4f6;  /* Light gray */

  /* Text - Darkest colors (AAA contrast) */
  --color-text-primary: #111827;   /* 16.04:1 */
  --color-text-secondary: #4b5563; /* 8.49:1 */
  --color-text-tertiary: #6b7280;  /* 5.77:1 */

  /* Primary color (accessible) */
  --color-primary: #2563eb;      /* 7.02:1 on white */
  --color-primary-hover: #1d4ed8; /* 9.52:1 on white */

  /* Interactive states */
  --color-link: #2563eb;         /* 7.02:1 */
  --color-link-hover: #1d4ed8;   /* 9.52:1 */
  --color-link-visited: #7c3aed; /* 7.09:1 */

  /* Status colors (all AAA compliant) */
  --color-success: #047857;      /* 7.36:1 */
  --color-warning: #b45309;      /* 7.01:1 */
  --color-error: #dc2626;        /* 7.29:1 */
}

[data-theme="dark"] {
  /* Backgrounds - Darkest colors */
  --color-bg: #111827;           /* Very dark gray */
  --color-bg-secondary: #1f2937; /* Dark gray */
  --color-bg-tertiary: #374151;  /* Medium-dark gray */

  /* Text - Lightest colors (AAA contrast) */
  --color-text-primary: #f9fafb;   /* 14.73:1 */
  --color-text-secondary: #d1d5db; /* 10.31:1 */
  --color-text-tertiary: #9ca3af;  /* 6.16:1 */

  /* Primary color (lighter for dark mode) */
  --color-primary: #60a5fa;      /* 7.38:1 on dark bg */
  --color-primary-hover: #93c5fd; /* 10.73:1 on dark bg */

  /* Status colors (adjusted for dark mode) */
  --color-success: #34d399;      /* 7.53:1 */
  --color-warning: #fbbf24;      /* 13.44:1 */
  --color-error: #f87171;        /* 7.03:1 */
}

#3b82f6 → rgb(59, 130, 246)

Calculation:
R: 3b (hex) = 59 (decimal)
G: 82 (hex) = 130 (decimal)
B: f6 (hex) = 246 (decimal)

rgb(59, 130, 246) → hsl(217, 91%, 60%)

Calculation:
H: 217° (hue)
S: 91% (saturation)
L: 60% (lightness)

/* HEX with alpha */
--color-primary: #3b82f6;
--color-primary-10: #3b82f61a; /* 10% opacity */
--color-primary-50: #3b82f680; /* 50% opacity */

/* RGB with alpha */
--color-primary-rgb: 59, 130, 246;
--color-primary-10: rgba(var(--color-primary-rgb), 0.1);
--color-primary-50: rgba(var(--color-primary-rgb), 0.5);

/* HSL with alpha */
--color-primary: hsl(217, 91%, 60%);
--color-primary-10: hsl(217, 91%, 60%, 0.1);
--color-primary-50: hsl(217, 91%, 60%, 0.5);

:root {
  /* 1. Global tokens - Raw colors */
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-gray-50: #f9fafb;
  --color-gray-900: #111827;

  /* 2. Semantic tokens - Purpose */
  --color-primary: var(--color-blue-600);
  --color-text-primary: var(--color-gray-900);
  --color-surface: var(--color-gray-50);

  /* 3. Component tokens - Specific */
  --button-bg-primary: var(--color-primary);
  --button-text-primary: white;
  --card-bg: var(--color-surface);
}

.button-primary {
  /* Default state */
  background: #2563eb;  /* 7.02:1 on white */
  color: white;

  /* Hover state */
  &:hover {
    background: #1d4ed8; /* 9.52:1 on white */
  }

  /* Focus state */
  &:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    /* Outline must have 3:1 contrast with adjacent colors */
  }

  /* Active/pressed state */
  &:active {
    background: #1e40af; /* 11.19:1 on white */
  }

  /* Disabled state */
  &:disabled {
    background: #93c5fd; /* 3.24:1 - may fail for text */
    color: #6b7280;     /* Reduced contrast acceptable when disabled */
    opacity: 0.6;
  }
}

:root {
  /* Blue palette - All colors tested for accessibility */

  /* Primary actions - AAA compliant on white */
  --color-primary: #1d4ed8;      /* 9.52:1 */
  --color-primary-hover: #1e40af; /* 11.19:1 */

  /* Backgrounds */
  --color-primary-bg: #eff6ff;   /* Subtle background */
  --color-primary-border: #93c5fd; /* 3.24:1 - good for borders */

  /* Text on primary buttons */
  --color-primary-text: #ffffff; /* 9.52:1 on #1d4ed8 */

  /* Links */
  --color-link: #2563eb;         /* 7.02:1 - AAA for large text */
  --color-link-hover: #1d4ed8;   /* 9.52:1 - AAA */
  --color-link-visited: #7c3aed; /* 7.09:1 - AAA */

  /* Status indicators */
  --color-info: #0284c7;         /* 7.24:1 */
  --color-info-bg: #e0f2fe;      /* Background for info messages */
}

/* Usage example */
.button-primary {
  background: var(--color-primary);
  color: var(--color-primary-text);
}

.button-primary:hover {
  background: var(--color-primary-hover);
}

.link {
  color: var(--color-link);
}

.link:hover {
  color: var(--color-link-hover);
}