/*
 * React (react@1.0.0)
 * Palette: react@1.0.0
 * Fonts:   heading=inter@1.0.0, body=inter@1.0.0, mono=source-code-pro@1.0.0
 * Generated by brand-atoms converter — do not edit by hand.
 */

:root {
  /* Swatches (source-of-truth color values) */
  --color-swatch-react-cyan: #61DAFB;
  --color-swatch-react-blue-50: #087EA4;
  --color-swatch-react-blue-40: #149ECA;
  --color-swatch-react-blue-30: #58C4DC;
  --color-swatch-react-blue-80: #043849;
  --color-swatch-react-blue-10: #E6F7FF;
  --color-swatch-gray-95: #16181D;
  --color-swatch-gray-90: #23272F;
  --color-swatch-gray-80: #343A46;
  --color-swatch-gray-70: #404756;
  --color-swatch-gray-60: #4E5769;
  --color-swatch-gray-50: #5E687E;
  --color-swatch-gray-30: #99A1B3;
  --color-swatch-gray-10: #EBECF0;
  --color-swatch-gray-5: #F6F7F9;
  --color-swatch-react-white: #FFFFFF;
  --color-swatch-yellow-50: #C76A15;
  --color-swatch-red-50: #A6423A;
  --color-swatch-green-50: #388F7F;
  --color-swatch-purple-50: #575FB7;

  /* Light-mode semantic roles */
  --color-background: #FFFFFF;
  --color-surface: #F6F7F9;
  --color-surface-elevated: #FFFFFF;
  --color-text-primary: #23272F;
  --color-text-secondary: #404756;
  --color-text-tertiary: #5E687E;
  --color-primary: #087EA4;
  --color-primary-hover: #043849;
  --color-accent: #61DAFB;
  --color-accent-hover: #149ECA;
  --color-warning: #C76A15;
  --color-warning-hover: #C76A15;
  --color-error: #A6423A;
  --color-success: #388F7F;

  /* Brand-level role overrides */
  --brand-color-identity: #61DAFB;
  --brand-color-on-identity: #23272F;
  --brand-color-primary: #087EA4;
  --brand-color-primary-hover: #043849;
  --brand-color-accent: #61DAFB;
  --brand-color-accent-hover: #149ECA;
  --brand-color-background: #23272F;
  --brand-color-surface: #343A46;
  --brand-color-text-primary: #FFFFFF;
  --brand-color-text-secondary: #99A1B3;

  /* Typography */
  --font-heading: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark-mode semantic roles override light-mode values */
    --color-background: #23272F;
    --color-surface: #343A46;
    --color-surface-elevated: #404756;
    --color-text-primary: #FFFFFF;
    --color-text-secondary: #99A1B3;
    --color-text-tertiary: #5E687E;
    --color-primary: #58C4DC;
    --color-primary-hover: #149ECA;
    --color-accent: #61DAFB;
    --color-accent-hover: #58C4DC;
    --color-warning: #C76A15;
    --color-warning-hover: #C76A15;
    --color-error: #A6423A;
    --color-success: #388F7F;
  }
}