/* Emma Design System — tokens (light + dark) */

:root,
[data-theme="light"] {
  /* Neutrals (primitives) */
  --neutral-0: #FFFFFF;
  --neutral-50: #F7F7F8;
  --neutral-100: #EEEEF0;
  --neutral-200: #DADADD;
  --neutral-300: #B9BAC0;
  --neutral-400: #93949D;
  --neutral-500: #767781;
  --neutral-600: #5F5F6A;
  --neutral-700: #4E4E56;
  --neutral-800: #434349;
  --neutral-900: #3A3A40;
  --neutral-950: #161618;
  --neutral-1000: #000000;

  /* Brand */
  --blue-50:  #EEF3FF;
  --blue-100: #D5E1FF;
  --blue-200: #B3C7FF;
  --blue-300: #85A0FF;
  --blue-400: #566AFF;
  --blue-500: #2F37FF;
  --blue-600: #1644D0;
  --blue-700: #1A3CB3;
  --blue-800: #1B368D;
  --blue-900: #152356;

  --purple-50:  #F5F3FF;
  --purple-100: #EDE8FF;
  --purple-200: #DBD5FF;
  --purple-300: #C2B3FF;
  --purple-400: #A388FD;
  --purple-500: #8452FF;
  --purple-600: #7835F2;
  --purple-700: #571DBA;
  --purple-800: #491A98;
  --purple-900: #2C0E67;

  --teal-50:  #EEFFFD;
  --teal-100: #C6FFFC;
  --teal-200: #8DFFFA;
  --teal-300: #69FDF8;
  --teal-400: #17EAEA;
  --teal-500: #00CCCE;
  --teal-600: #00A1A6;
  --teal-700: #017E84;
  --teal-800: #076268;
  --teal-900: #0B5256;

  /* System */
  --yellow-100: #F8FBCC;
  --yellow-300: #E1F066;
  --yellow-500: #B1C919;
  --yellow-700: #687A11;
  --yellow-900: #252D06;

  --green-100: #DDFBE2;
  --green-300: #8BEA9D;
  --green-500: #29BE47;
  --green-700: #1A7B2E;

  --orange-100: #FCE9D8;
  --orange-300: #F2A36E;
  --orange-500: #E96126;
  --orange-700: #B53519;
  --orange-900: #752719;

  --red-100: #FFDDDD;
  --red-300: #FF9494;
  --red-500: #FF2323;
  --red-700: #D50000;
  --red-900: #900C0C;

  --pink-100: #FAE9F5;
  --pink-300: #F2AFDC;
  --pink-500: #E166B4;
  --pink-900: #7A2151;

  /* Semantic — light theme */
  --bg-canvas: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-2: var(--neutral-50);
  --bg-inverse: var(--neutral-1000);
  --bg-muted: var(--neutral-100);

  --fg-default: var(--neutral-1000);
  --fg-secondary: var(--neutral-600);
  --fg-muted: var(--neutral-500);
  --fg-disabled: var(--neutral-300);
  --fg-inverse: var(--neutral-0);
  --fg-brand: var(--blue-700);

  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-subtle: var(--neutral-100);
  --border-inverse: var(--neutral-1000);

  --action-primary-bg: var(--neutral-1000);
  --action-primary-fg: var(--neutral-0);
  --action-primary-bg-hover: var(--neutral-900);

  --action-secondary-bg: var(--neutral-0);
  --action-secondary-fg: var(--neutral-1000);
  --action-secondary-border: var(--neutral-200);

  --status-success: var(--green-700);
  --status-success-bg: var(--green-100);
  --status-warning: var(--orange-500);
  --status-warning-bg: var(--orange-100);
  --status-error: var(--red-500);
  --status-error-bg: var(--red-100);
  --status-info: var(--blue-700);
  --status-info-bg: var(--blue-50);

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-full: 9999px;

  /* Spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.04), 0 4px 8px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.06), 0 16px 40px rgba(0,0,0,0.10);
  --shadow-2xl: 0 16px 32px rgba(0,0,0,0.08), 0 32px 64px rgba(0,0,0,0.14);
  --shadow-focus: 0 0 0 3px rgba(55,64,230,0.26);

  /* Typography */
  --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

[data-theme="dark"] {
  /* Mostly black. Blue lives only on accents (see --fg-brand, focus, links). */
  --bg-canvas: #060608;
  --bg-surface: #101012;
  --bg-surface-2: #17171A;
  --bg-inverse: var(--neutral-0);
  --bg-muted: #1C1C20;

  --fg-default: var(--neutral-0);
  --fg-secondary: var(--neutral-300);
  --fg-muted: var(--neutral-400);
  --fg-disabled: var(--neutral-700);
  --fg-inverse: var(--neutral-1000);
  --fg-brand: var(--blue-300);

  --border-default: #26262B;
  --border-strong: #34343B;
  --border-subtle: #1B1B1F;
  --border-inverse: var(--neutral-0);

  --action-primary-bg: var(--neutral-0);
  --action-primary-fg: var(--neutral-1000);
  --action-primary-bg-hover: var(--neutral-100);

  --action-secondary-bg: #1A1A1E;
  --action-secondary-fg: var(--neutral-0);
  --action-secondary-border: #2C2C32;

  --status-success: var(--green-300);
  --status-success-bg: #0F2D17;
  --status-warning: var(--orange-300);
  --status-warning-bg: #2C1408;
  --status-error: var(--red-300);
  --status-error-bg: #2C0F0F;
  --status-info: var(--blue-300);
  --status-info-bg: #0E1738;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.4), 0 4px 8px rgba(0,0,0,0.5);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.6);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.6), 0 16px 40px rgba(0,0,0,0.7);
  --shadow-2xl: 0 16px 32px rgba(0,0,0,0.7), 0 32px 64px rgba(0,0,0,0.85);
  --shadow-focus: 0 0 0 3px rgba(111,141,255,0.4);
}