/*
 * tokens.css — design tokens (custom properties). Hex values live ONLY here.
 * Load order: tokens.css -> base.css -> layout.css -> components.css -> utilities.css
 */
:root {
  /* Blue scale ("Azure" — primary) */
  --blue-25: #F7FAFF;
  --blue-50: #EFF5FF;
  --blue-100: #DEEAFE;
  --blue-200: #BDD5FC;
  --blue-300: #91B8F9;
  --blue-400: #5D93F2;
  --blue-500: #2E6BE6;
  --blue-600: #1D5BD8;
  --blue-700: #174AB5;
  --blue-800: #143D92;
  --blue-900: #112F6E;

  /* Green scale ("Growth" — secondary; positive/success only) */
  --green-25: #F5FCF8;
  --green-50: #EAF8F0;
  --green-100: #D5F0E0;
  --green-200: #ABE3C5;
  --green-300: #79CFA4;
  --green-400: #43B87E;
  --green-500: #22A863;
  --green-600: #17914E;
  --green-700: #0F7A41;
  --green-800: #0C6136;
  --green-900: #094A2A;

  /* Neutrals (blue-grey) */
  --neutral-0: #FFFFFF;
  --neutral-25: #FBFCFE;
  --neutral-50: #F7F9FC;
  --neutral-100: #EEF2F7;
  --neutral-200: #E1E7EF;
  --neutral-300: #CBD4E1;
  --neutral-400: #99A5B8;
  --neutral-500: #63718A;
  --neutral-600: #47546B;
  --neutral-700: #333F55;
  --neutral-800: #1F2A40;
  --neutral-900: #0F1B2D;

  /* Semantic colors */
  --success-50: var(--green-50);
  --success-200: var(--green-200);
  --success-500: var(--green-500);
  --success-700: var(--green-700);

  --warning-50: #FEF5E7;
  --warning-300: #F8DCAE;
  --warning-500: #EFA008;
  --warning-700: #B25406;

  --error-50: #FEECEB;
  --error-300: #F9C6C2;
  --error-500: #E5484D;
  --error-600: #D92D20;
  --error-700: #B42318;

  --info-50: var(--blue-50);
  --info-200: var(--blue-200);
  --info-500: var(--blue-500);
  --info-600: var(--blue-600);

  /* Semantic aliases — components reference these, never raw scales */
  --surface: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --border: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-disabled: var(--neutral-400);
  --text-link: var(--blue-600);
  --text-on-brand: #FFFFFF;

  --grad-primary: linear-gradient(180deg, #2E6BE6 0%, #1D5BD8 100%);
  --grad-primary-hover: linear-gradient(180deg, #2760D5 0%, #174AB5 100%);
  --grad-page: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 320px);
  --grad-hero: radial-gradient(1200px 480px at 50% -10%, #DEEAFE 0%, rgba(222, 234, 254, 0) 70%);

  /* Spacing (base 4px) */
  --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;

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

  /* Shadows (tinted with brand black) */
  --shadow-xs: 0 1px 2px rgba(15, 27, 45, .06);
  --shadow-sm: 0 1px 3px rgba(15, 27, 45, .08), 0 1px 2px rgba(15, 27, 45, .04);
  --shadow-md: 0 4px 12px rgba(15, 27, 45, .08), 0 2px 4px rgba(15, 27, 45, .04);
  --shadow-lg: 0 12px 32px rgba(15, 27, 45, .12), 0 4px 8px rgba(15, 27, 45, .05);
  --shadow-focus: 0 0 0 3px rgba(46, 107, 230, .30);
  --shadow-focus-error: 0 0 0 3px rgba(229, 72, 77, .28);

  /* Typography */
  --font-sans: 'Inter', 'Noto Sans Thai', -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'SFMono-Regular', 'Cascadia Mono', Consolas, 'Liberation Mono', Menlo, monospace;

  --text-xs-size: .75rem;
  --text-xs-line: 1.125rem;
  --text-sm-size: .875rem;
  --text-sm-line: 1.375rem;
  --text-base-size: 1rem;
  --text-base-line: 1.625rem;
  --text-lg-size: 1.125rem;
  --text-lg-line: 1.875rem;
  --text-xl-size: 1.25rem;
  --text-xl-line: 2rem;
  --text-2xl-size: 1.5rem;
  --text-2xl-line: 2.25rem;
  --text-3xl-size: 1.875rem;
  --text-3xl-line: 2.75rem;
  --text-4xl-size: 2.375rem;
  --text-4xl-line: 3.375rem;

  /* Motion */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 260ms;
  --ease-out: cubic-bezier(.2, 0, 0, 1);
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1);

  /* Breakpoints (referenced in comments only — CSS can't read vars in media queries) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}