/* Design tokens — color, type, space, motion. */

:root {

  /* COLOR */

  /* Backgrounds */
  --ink:                  #0B1B36;
  --mid:                  #163A68;
  --surface:              #FCFBF8;
  
  --surface-warm:         #F6F3EC;

  
  --surface-deep:         #F6F3EC;

  
  --card:                 #FCFBF8;

  /* Text on INK / MID */
  --text-primary-dark:    #FCFBF8;
  --text-secondary-dark:  rgba(246, 243, 236, 0.78);
  --muted-dark:           rgba(246, 243, 236, 0.60);   /* AA on both INK and MID */
  --hairline-dark:        rgba(252, 251, 248, 0.12);

  /* Text on SURFACE */
  --text-primary:         #0B1B36;
  --text-secondary:       rgba(11, 27, 54, 0.78);
  --muted:                #657080;   /* AA on SURFACE */
  --hairline:             #E7E3D7;

  

  /* Accent: meaning (blue) on light / gold on dark */
  --accent:               #245A9A;   /* on light */
  --accent-on-dark:       #C9A348;   /* on INK / MID */

  
  --accent-action:        #245A9A;
  --accent-action-text:   #FCFBF8;
  
  --accent-action-hover:  #0B1B36;

  --accent-hover:         #163A68;   /* legacy alias, kept for outline CTA */
  --accent-contrast:      #FCFBF8;

  
  --highlight:            #D8BE78;
  --highlight-text:       #0B1B36;

  
  --zone-bg:              var(--surface);

  /* Contextual aliases — flipped by .zone--dark / .zone--light */
  --fg-primary:           var(--text-primary);
  --fg-secondary:         var(--text-secondary);
  --fg-muted:             var(--muted);
  --rule:                 var(--hairline);
  --accent-contextual:    var(--accent);

  /* TYPOGRAPHY */

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;

  /* Twelve type roles */
  --t-hero:      clamp(2.25rem,   1.2rem  + 4.6vw,  4.5rem);
  --t-price:     clamp(2rem,      1.35rem + 2.6vw,  3.5rem);
  --t-section:   clamp(1.75rem,   1.15rem + 2.4vw,  3rem);
  --t-insight:   clamp(1.625rem,  1.05rem + 2vw,    2.5rem);
  --t-timeline:  clamp(1.375rem,  1.1rem  + 1.1vw,  2rem);
  --t-body-lg:   clamp(1.0625rem, 1rem    + 0.3vw,  1.25rem);
  
  --t-body:      clamp(1rem,      0.97rem + 0.15vw, 1.125rem);
  --t-cell:      clamp(0.9375rem, 0.9rem  + 0.2vw,  1.0625rem);
  --t-small:     clamp(0.9375rem, 0.92rem + 0.1vw,  1rem);
  --t-identity:  clamp(0.95rem,   0.85rem + 0.45vw, 1.25rem);
  --t-ui:        clamp(1rem,      0.98rem + 0.1vw,  1.0625rem);
  --t-eyebrow:   clamp(0.75rem,   0.7rem  + 0.15vw, 0.875rem);
  --t-caption:   clamp(0.875rem,  0.87rem + 0.05vw, 0.9375rem);

  /* Line heights */
  --lh-hero: 1.08;
  --lh-price: 1;
  --lh-section: 1.15;
  --lh-insight: 1.28;
  --lh-body-lg: 1.65;
  --lh-body: 1.7;
  --lh-cell: 1.4;
  --lh-small: 1.6;
  --lh-tight: 1.2;

  /* Tracking */
  --tr-hero: -0.02em;
  --tr-section: -0.015em;
  --tr-insight: -0.01em;
  --tr-ui: 0.02em;
  --tr-eyebrow: 0.12em;

  /* Measure — design starting points, verify optically (COPY > TOKEN MATH) */
  --m-hero: 24ch;
  --m-section: 22ch;
  --m-insight: 26ch;
  --m-body-lg: 58ch;
  --m-body: 62ch;
  --m-small: 66ch;

  /* SPACING */

  
  --unit: clamp(2.5rem, 1.6rem + 2.8vw, 4.75rem);

  --pad-breath:  calc(var(--unit) * 1.5);
  --pad-build:   calc(var(--unit) * 1.1);
  --pad-deliver: calc(var(--unit) * 0.85);

  --space-3xs: 0.375rem;
  --space-2xs: 0.625rem;
  --space-xs:  1rem;
  --space-sm:  1.5rem;
  --space-md:  2.25rem;
  --space-lg:  2.75rem;
  --space-xl:  3.75rem;
  --space-2xl: 5.5rem;
  --space-3xl: 8rem;

  /* Gutter */
  --gutter: 1.5rem;

  /* Containers */
  --c-narrow:  40rem;   /* 640px — S08, S12 */
  --c-reading: 45rem;   /* 720px — S03 diagram, S15 */
  --c-mid:     52.5rem; /* 840px — S05 timeline */
  --c-wide:    68rem;   /* 1088px — hero, grids */

  /* MOTION */

  --dur-fast:   200ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-reveal: 450ms;
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --shift-y:    12px;

  /* FOCUS */
  --focus-width: 2px;
  --focus-offset: 3px;
}

.zone--dark {
  --zone-bg:           var(--ink);
  --fg-primary:        var(--text-primary-dark);
  --fg-secondary:      var(--text-secondary-dark);
  --fg-muted:          var(--muted-dark);
  --rule:              var(--hairline-dark);
  --accent-contextual: var(--accent-on-dark);
  color: var(--fg-primary);
}

.zone--light {
  --zone-bg:           var(--surface);
  --fg-primary:        var(--text-primary);
  --fg-secondary:      var(--text-secondary);
  --fg-muted:          var(--muted);
  --rule:              var(--hairline);
  --accent-contextual: var(--accent);
  color: var(--fg-primary);
}

@media (min-width: 1024px) {
  :root { --gutter: 2.5rem; }
}