/* ============================================================
   tokens.css
   Authoritative tokens for the NExT redesign demo.
   Source: /docs/UI_DIRECTION.md sections 3, 4, 5.
   Components reference SEMANTIC tokens only — never primitives.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. COLOR PRIMITIVES — do NOT use directly in components
     ---------------------------------------------------------- */

  /* Blue — primary brand */
  --blue-50:  #F5F6FF;
  --blue-100: #EBECFF;
  --blue-200: #B3B9FF;
  --blue-300: #808BFF;
  --blue-400: #4C5DFF;
  --blue-500: #1A2EFF;
  --blue-600: #0014DC;
  --blue-700: #0010B2;
  --blue-800: #000C80;
  --blue-900: #00074D;

  /* DarkBlue — deep brand (headers, hero, footer) */
  --darkblue:  #1E1464;
  --lightblue: #D7D9FF;

  /* AquaBlue — secondary accent */
  --aqua-50:  #F2FCFD;
  --aqua-100: #CCF6F8;
  --aqua-200: #99EDF1;
  --aqua-300: #66E4EA;
  --aqua-400: #33DBE3;
  --aqua-500: #00D2DC;
  --aqua-600: #00A8B0;
  --aqua-700: #007E84;
  --aqua-800: #005458;
  --aqua-900: #002A2C;

  /* FrostBlue — soft brand neutral (rarely used) */
  --frost-100: #AFBEE1;
  --frost-200: #6E8CC8;

  /* Purple — reserved for AI feature */
  --purple-50:  #F3EFFA;
  --purple-100: #E7DFF5;
  --purple-200: #CEC0EA;
  --purple-300: #C2B0E5;
  --purple-400: #A687D6;
  --purple-500: #875EC7;
  --purple-600: #6938BF;
  --purple-700: #4F3D82;
  --purple-800: #3D3378;
  --purple-900: #292963;

  /* Pink — reserved for promotional / "new" badges */
  --pink-50:  #FEEEFD;
  --pink-100: #FDDDFB;
  --pink-200: #FCC4F8;
  --pink-300: #FAABF5;
  --pink-400: #F58CEB;
  --pink-500: #D659BF;
  --pink-600: #CC248C;
  --pink-700: #AB146B;
  --pink-800: #A11463;
  --pink-900: #871445;

  /* Yellow — warning */
  --yellow-50:  #FEFDF6;
  --yellow-100: #FCF9E8;
  --yellow-200: #FFF2CC;
  --yellow-300: #FFECB2;
  --yellow-400: #FFDF80;
  --yellow-500: #FFD24D;
  --yellow-600: #FFBF00;
  --yellow-700: #F0A000;
  --yellow-800: #E58600;
  --yellow-900: #CC7700;

  /* OrangeRed — danger */
  --orangered-50:  #FDF2F0;
  --orangered-100: #FBE5E1;
  --orangered-200: #F7CCC4;
  --orangered-300: #F5BFB5;
  --orangered-400: #EB9191;
  --orangered-500: #EB5E5E;
  --orangered-600: #F03D2E;
  --orangered-700: #DB381F;
  --orangered-800: #D11F1F;
  --orangered-900: #B50A0A;

  /* Green — success */
  --green-50:  #F0FCEF;
  --green-100: #E1F9DF;
  --green-200: #D2F6CF;
  --green-300: #B4F0AF;
  --green-400: #8CDC8C;
  --green-500: #64CD6E;
  --green-600: #3CBE46;
  --green-700: #32A532;
  --green-800: #1E961E;
  --green-900: #198C19;

  /* Gray (note: 500 and 700 intentionally absent in source system) */
  --gray-50:  #F2F2F3;
  --gray-100: #E5E5E7;
  --gray-200: #CACACE;
  --gray-300: #8D8D96;
  --gray-400: #6E6E77;
  --gray-600: #5B5B63;
  --gray-800: #3D3D42;
  --gray-900: #18181B;

  /* Cool neutrals — page backgrounds */
  --coolgray-light: #F8F8FA;
  --coolgray:       #EDEEF2;
  --coolgray-dark:  #E0E0EB;
  --white:          #FDFCFC;
  --lightwhite:     #FEFDFD;

  /* Alpha primitives — overlays, scrims, focus rings, decorative gradients */
  --alpha-darkblue-10:      rgb(30 20 100 / 0.10);
  --alpha-darkblue-25:      rgb(30 20 100 / 0.25);
  --alpha-darkblue-50:      rgb(30 20 100 / 0.50);
  --alpha-darkblue-75:      rgb(30 20 100 / 0.75);
  --alpha-blue-10:          rgb(0 20 220 / 0.10);
  --alpha-blue-20:          rgb(0 20 220 / 0.20);
  --alpha-blue-25:          rgb(0 20 220 / 0.25);
  --alpha-blue-50:          rgb(0 20 220 / 0.50);

  /* Deep-blue (blue-800 #000C80) — translucent panels on the deep-brand band */
  --alpha-deep-30:          rgb(0 12 128 / 0.30);
  --alpha-deep-40:          rgb(0 12 128 / 0.40);
  --alpha-deep-50:          rgb(0 12 128 / 0.50);

  /* Purple (purple-500 #875EC7) — AI decorative accents */
  --alpha-purple-10:        rgb(135 94 199 / 0.10);
  --alpha-purple-20:        rgb(135 94 199 / 0.20);
  --alpha-purple-30:        rgb(135 94 199 / 0.30);
  --alpha-purple-40:        rgb(135 94 199 / 0.40);

  /* Aqua deep (aqua-600 #00A8B0) — secondary accent washes / AI surfaces */
  --alpha-aqua-10:          rgb(0 168 176 / 0.10);
  --alpha-aqua-20:          rgb(0 168 176 / 0.20);
  --alpha-aqua-30:          rgb(0 168 176 / 0.30);
  --alpha-aqua-40:          rgb(0 168 176 / 0.40);

  /* Aqua bright (aqua-300 #66E4EA) — status pulse + bright accents on dark */
  --alpha-aqua-bright-10:   rgb(102 228 234 / 0.10);
  --alpha-aqua-bright-20:   rgb(102 228 234 / 0.20);
  --alpha-aqua-bright-30:   rgb(102 228 234 / 0.30);

  /* Lightblue (lightblue #D7D9FF) — subtle grid pattern on dark */
  --alpha-lightblue-5:      rgb(215 217 255 / 0.05);

  /* Black — shadows + overlays */
  --alpha-black-5:          rgb(0 0 0 / 0.05);
  --alpha-black-10:         rgb(0 0 0 / 0.10);
  --alpha-black-20:         rgb(0 0 0 / 0.20);
  --alpha-black-30:         rgb(0 0 0 / 0.30);

  /* ----------------------------------------------------------
     2. SEMANTIC TOKENS — components reference ONLY these
     ---------------------------------------------------------- */

  /* Surface */
  --surface-page:    var(--white);
  --surface-subtle:  var(--coolgray-light);
  --surface-muted:   var(--coolgray);
  --surface-inverse: var(--darkblue);
  --surface-overlay: var(--alpha-darkblue-50);

  /* Border */
  --border-subtle:  var(--coolgray-dark);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--blue-600);

  /* Text */
  --text-primary:    var(--gray-900);
  --text-secondary:  var(--gray-600);
  --text-muted:      var(--gray-400);
  --text-inverse:    var(--white);
  --text-link:       var(--blue-600);
  --text-link-hover: var(--blue-700);

  /* Action — primary (buy, register, submit) */
  --action-primary-bg:        var(--blue-600);
  --action-primary-bg-hover:  var(--blue-700);
  --action-primary-bg-active: var(--blue-800);
  --action-primary-text:      var(--white);
  --action-primary-soft-bg:   var(--blue-50);
  --action-primary-soft-text: var(--blue-700);

  /* Action — secondary (outlined) */
  --action-secondary-border:       var(--gray-300);
  --action-secondary-border-hover: var(--gray-600);
  --action-secondary-text:         var(--gray-900);

  /* Brand — header, hero, footer dark band */
  --brand-deep-bg:     var(--darkblue);
  --brand-deep-text:   var(--white);
  --brand-deep-accent: var(--lightblue);

  /* AI feature — aqua-blue family (brand policy: blues + aqua-blues for accents).
     Purple is intentionally NOT used here; reserved primitives only. */
  --ai-bg:         var(--aqua-50);
  --ai-bg-strong:  var(--aqua-600);
  --ai-text:       var(--aqua-800);
  --ai-border:     var(--aqua-200);
  --ai-accent:     var(--aqua-500);

  /* Status */
  --status-success-bg:     var(--green-50);
  --status-success-text:   var(--green-800);
  --status-success-border: var(--green-300);
  --status-warning-bg:     var(--yellow-50);
  --status-warning-text:   var(--yellow-900);
  --status-warning-border: var(--yellow-400);
  --status-danger-bg:      var(--orangered-50);
  --status-danger-text:    var(--orangered-800);
  --status-danger-border:  var(--orangered-300);
  --status-info-bg:        var(--aqua-50);
  --status-info-text:      var(--aqua-800);
  --status-info-border:    var(--aqua-300);

  /* Promotional — "NEW", early-bird, last-minute */
  --promo-bg:   var(--pink-50);
  --promo-text: var(--pink-700);

  /* Focus ring */
  --focus-ring:        var(--blue-600);
  --focus-ring-offset: var(--white);

  /* ----------------------------------------------------------
     3. SPACING — 8-pt grid
     ---------------------------------------------------------- */

  --space-0:   0;
  --space-0_5: 2px;   /* hairline — borders, focus offsets only */
  --space-1:   4px;   /* small-only half-step */
  --space-2:   8px;
  --space-3:   12px;  /* small-only half-step */
  --space-4:   16px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ----------------------------------------------------------
     4. SIZING — interactive control heights
     ---------------------------------------------------------- */

  --size-sm: 32px;
  --size-md: 40px;
  --size-lg: 48px;
  --size-xl: 56px;

  /* ----------------------------------------------------------
     5. TYPE SCALE (rem; line-heights snap to 8-pt grid)
     ---------------------------------------------------------- */

  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-lg:   1.125rem;   /* 18 */
  --text-xl:   1.25rem;    /* 20 */
  --text-2xl:  1.5rem;     /* 24 */
  --text-3xl:  1.875rem;   /* 30 */
  --text-4xl:  2.25rem;    /* 36 */
  --text-5xl:  3rem;       /* 48 */
  --text-6xl:  3.75rem;    /* 60 */

  --leading-xs:   1rem;       /* 16 */
  --leading-sm:   1.25rem;    /* 20 */
  --leading-base: 1.5rem;     /* 24 */
  --leading-lg:   1.75rem;    /* 28 */
  --leading-xl:   1.75rem;    /* 28 */
  --leading-2xl:  2rem;       /* 32 */
  --leading-3xl:  2.25rem;    /* 36 */
  --leading-4xl:  2.5rem;     /* 40 */
  --leading-5xl:  3.25rem;    /* 52 */
  --leading-6xl:  4rem;       /* 64 */

  --tracking-tight: -0.02em;
  --tracking-base:  0;

  /* ----------------------------------------------------------
     6. RADIUS
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     7. ELEVATION — borders before shadows
     ---------------------------------------------------------- */

  --shadow-sm: 0 1px 2px var(--alpha-black-5);
  --shadow-md: 0 4px 12px var(--alpha-black-10);
  --shadow-lg: 0 12px 32px var(--alpha-darkblue-10);

  /* ----------------------------------------------------------
     8. MOTION
     ---------------------------------------------------------- */

  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* ----------------------------------------------------------
     9. LAYOUT
     ---------------------------------------------------------- */

  --container-max:  1280px;
  --container-edge: 1440px;
  --gutter-desktop: 24px;
  --gutter-tablet:  16px;
  --gutter-mobile:  16px;
}