// 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.

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

// ─── Light-mode role mappings ─────────────────────────
$light-background: $swatch-react-white;
$light-surface: $swatch-gray-5;
$light-surface-elevated: $swatch-react-white;
$light-text-primary: $swatch-gray-90;
$light-text-secondary: $swatch-gray-70;
$light-text-tertiary: $swatch-gray-50;
$light-primary: $swatch-react-blue-50;
$light-primary-hover: $swatch-react-blue-80;
$light-accent: $swatch-react-cyan;
$light-accent-hover: $swatch-react-blue-40;
$light-warning: $swatch-yellow-50;
$light-warning-hover: $swatch-yellow-50;
$light-error: $swatch-red-50;
$light-success: $swatch-green-50;

// ─── Dark-mode role mappings ──────────────────────────
$dark-background: $swatch-gray-90;
$dark-surface: $swatch-gray-80;
$dark-surface-elevated: $swatch-gray-70;
$dark-text-primary: $swatch-react-white;
$dark-text-secondary: $swatch-gray-30;
$dark-text-tertiary: $swatch-gray-50;
$dark-primary: $swatch-react-blue-30;
$dark-primary-hover: $swatch-react-blue-40;
$dark-accent: $swatch-react-cyan;
$dark-accent-hover: $swatch-react-blue-30;
$dark-warning: $swatch-yellow-50;
$dark-warning-hover: $swatch-yellow-50;
$dark-error: $swatch-red-50;
$dark-success: $swatch-green-50;

// ─── Brand-level color role overrides ─────────────────
$brand-identity: $swatch-react-cyan;
$brand-on-identity: $swatch-gray-90;
$brand-primary: $swatch-react-blue-50;
$brand-primary-hover: $swatch-react-blue-80;
$brand-accent: $swatch-react-cyan;
$brand-accent-hover: $swatch-react-blue-40;
$brand-background: $swatch-gray-90;
$brand-surface: $swatch-gray-80;
$brand-text-primary: $swatch-react-white;
$brand-text-secondary: $swatch-gray-30;

// ─── 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);

// ─── Iteration maps ───────────────────────────────────
$swatches: (
  "react-cyan": $swatch-react-cyan,
  "react-blue-50": $swatch-react-blue-50,
  "react-blue-40": $swatch-react-blue-40,
  "react-blue-30": $swatch-react-blue-30,
  "react-blue-80": $swatch-react-blue-80,
  "react-blue-10": $swatch-react-blue-10,
  "gray-95": $swatch-gray-95,
  "gray-90": $swatch-gray-90,
  "gray-80": $swatch-gray-80,
  "gray-70": $swatch-gray-70,
  "gray-60": $swatch-gray-60,
  "gray-50": $swatch-gray-50,
  "gray-30": $swatch-gray-30,
  "gray-10": $swatch-gray-10,
  "gray-5": $swatch-gray-5,
  "react-white": $swatch-react-white,
  "yellow-50": $swatch-yellow-50,
  "red-50": $swatch-red-50,
  "green-50": $swatch-green-50,
  "purple-50": $swatch-purple-50,
);

$light-roles: (
  "background": $light-background,
  "surface": $light-surface,
  "surface-elevated": $light-surface-elevated,
  "text-primary": $light-text-primary,
  "text-secondary": $light-text-secondary,
  "text-tertiary": $light-text-tertiary,
  "primary": $light-primary,
  "primary-hover": $light-primary-hover,
  "accent": $light-accent,
  "accent-hover": $light-accent-hover,
  "warning": $light-warning,
  "warning-hover": $light-warning-hover,
  "error": $light-error,
  "success": $light-success,
);

$dark-roles: (
  "background": $dark-background,
  "surface": $dark-surface,
  "surface-elevated": $dark-surface-elevated,
  "text-primary": $dark-text-primary,
  "text-secondary": $dark-text-secondary,
  "text-tertiary": $dark-text-tertiary,
  "primary": $dark-primary,
  "primary-hover": $dark-primary-hover,
  "accent": $dark-accent,
  "accent-hover": $dark-accent-hover,
  "warning": $dark-warning,
  "warning-hover": $dark-warning-hover,
  "error": $dark-error,
  "success": $dark-success,
);