/* =========================================================
   Promise Design System — Tokens
   Two-tier: primitives (value carriers) → semantics (intent)
   ========================================================= */

:root {
  /* ---------- Primitives ---------- */
  /* Blue — brand */
  --blue-50:  #EEF4FF;
  --blue-100: #DCE8FF;
  --blue-200: #B8D1FF;
  --blue-300: #8FB3FF;
  --blue-400: #5C86F5;
  --blue-500: #2F5BEA;
  --blue-600: #1E46C8;
  --blue-700: #1736A0;
  --blue-800: #0F2570;

  /* Neutral */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #FAFBFC;
  --neutral-50:  #F6F7F9;
  --neutral-100: #EEF0F3;
  --neutral-200: #E6E8EC;
  --neutral-300: #D5D9E0;
  --neutral-400: #B1B8C2;
  --neutral-500: #8A93A3;
  --neutral-600: #5C6677;
  --neutral-700: #2A3342;
  --neutral-800: #171C27;
  --neutral-900: #0B1220;

  /* Semantic primitives */
  --green-50:  #E8F7EF;
  --green-500: #0B8A4A;
  --green-600: #067239;
  --amber-50:  #FFF4E5;
  --amber-500: #C7740A;
  --amber-700: #854A08;
  --red-50:    #FEECEA;
  --red-500:   #D14334;
  --red-600:   #B63626;
  --violet-50: #F5F3FF;
  --violet-500:#7C3AED;
  --violet-700:#5B21B6;

  /* ---------- Semantics (light) ---------- */
  --color-page-bg: var(--neutral-50);
  --color-surface: var(--neutral-0);
  --color-surface-subtle: var(--neutral-25);
  --color-hairline: var(--neutral-200);
  --color-hairline-strong: var(--neutral-300);

  --color-ink-1: var(--neutral-900); /* primary text */
  --color-ink-2: var(--neutral-700); /* body */
  --color-ink-3: var(--neutral-600); /* secondary */
  --color-ink-4: var(--neutral-500); /* tertiary / captions */

  --color-action-50:  var(--blue-50);
  --color-action-100: var(--blue-100);
  --color-action-500: var(--blue-500);
  --color-action-600: var(--blue-600);
  --color-action-700: var(--blue-700);

  --color-success-50:  var(--green-50);
  --color-success-500: var(--green-500);
  --color-success-600: var(--green-600);

  --color-warning-50:  var(--amber-50);
  --color-warning-500: var(--amber-500);
  --color-warning-700: var(--amber-700);

  --color-danger-50:  var(--red-50);
  --color-danger-500: var(--red-500);
  --color-danger-600: var(--red-600);

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --text-xs:   11px;   /* captions, tiny labels */
  --text-sm:   12px;   /* meta, chips */
  --text-base: 13px;   /* body */
  --text-md:   14px;   /* panel titles */
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  28px;   /* page H1 */

  --leading-tight: 1.25;
  --leading-normal: 1.5;

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

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;   /* default surface radius */
  --radius-lg: 10px;
  --radius-xl: 12px;  /* panels */
  --radius-pill: 999px;

  /* Elevation — keep these sparse; the system prefers hairlines over shadows */
  --shadow-1: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-2: 0 4px 12px -4px rgba(16,24,40,0.08);
  --shadow-3: 0 12px 32px -8px rgba(16,24,40,0.12), 0 4px 12px -4px rgba(16,24,40,0.08);

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-emph: cubic-bezier(.16,1,.3,1);

  /* Control heights — rhythm the whole UI follows */
  --ctrl-sm: 28px;
  --ctrl-md: 32px;
  --ctrl-lg: 36px;
  --ctrl-xl: 40px;

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--color-action-100);

  /* Link — defaults to action-600 (light), dark mode overrides below */
  --color-link: var(--color-action-600);
}

[data-theme="dark"] {
  --color-page-bg:         #0C1016;
  --color-surface:         #141920;
  --color-surface-subtle:  #10151B;
  --color-hairline:        #232932;
  --color-hairline-strong: #2C333E;

  --color-ink-1: #F3F5F8;
  --color-ink-2: #D9DEE6;
  --color-ink-3: #9AA3B2;
  --color-ink-4: #6C7585;

  --color-action-50:  rgba(47,91,234,0.14);
  --color-action-100: rgba(47,91,234,0.22);

  --color-success-50: rgba(11,138,74,0.16);
  --color-warning-50: rgba(199,116,10,0.16);
  --color-danger-50:  rgba(209,67,52,0.16);

  --shadow-1: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-2: 0 6px 16px -6px rgba(0,0,0,0.55);
  --shadow-3: 0 16px 40px -10px rgba(0,0,0,0.65);
  --focus-ring: 0 0 0 3px rgba(47,91,234,0.35);

  /* Link uses lighter blue for AA contrast on dark surfaces */
  --color-link: var(--blue-300);
}