/* =========================================================================
   Access2Insight — design tokens
   Single source of truth. Nothing below this file hard-codes a value.

   Palette sampled from the A2I concept deck (Figma: A2I-WEBSITE—CONCEPTS,
   node 353:648) and transposed onto a dark ground. The concept is a light
   layout on #FFFAF6; here its signature indigo becomes the page itself and
   its sunrise mesh becomes the light source behind the content.
   ========================================================================= */

:root {
  /* lets block-size: auto animate, for the services accordion */
  interpolate-size: allow-keywords;
  color-scheme: dark;

  /* ---- Ground -----------------------------------------------------------
     Four steps of the same indigo. #22153E is the concept's own brand dark
     (its nav, footer and buttons); the darker steps are extrapolated from
     it so the page can sit beneath its own brand colour.                   */
  --ink:            #0a0616;
  --ink-raised:     #140d28;
  --ink-deep:       #1c1134;
  --ink-brand:      #22153e;
  --ink-lift:       #2b1b4c;

  /* ---- The sunrise ramp -------------------------------------------------
     Read left-to-right off the concept's mesh gradient. These are gradient
     stops and decoration — only --gold and --flame clear AA as text.       */
  --gold:           #ffb500;
  --flame:          #f07550;
  --coral:          #eb6e60;
  --rose:           #e23d62;
  --magenta:        #b03061;
  --violet:         #962c98;

  /* ---- Semantic accents -------------------------------------------------
     --signal is the one bright note: primary CTA and the rare highlight.
     --flag is reserved for unverified content so a placeholder can never be
     mistaken for a brand accent. See BRAND.md §11.                         */
  --signal:         #fec451;   /* 12.6:1 on --ink; ink-on-signal also 12.6 */
  --signal-hot:     #ffd47a;
  --flag:           #db527c;   /*  5.2:1 */

  /* ---- Text -------------------------------------------------------------
     Warm off-white from the concept, with two lavender-tinted greys under
     it. All three clear WCAG AA on every ground above.                     */
  --paper:          #fffaf6;   /* 19.3:1 */
  --paper-dim:      #a99ebb;   /*  7.9:1 */
  --paper-faint:    #8c81a0;   /*  5.5:1 */

  --rule:           rgba(255,250,246,.13);
  --rule-soft:      rgba(255,250,246,.07);
  --rule-strong:    rgba(255,250,246,.26);

  /* ---- Type ------------------------------------------------------------ */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid scale. Deliberately dramatic: display runs to ~7.6rem against
     1.0625rem body — see BRAND.md §10 "Type".                              */
  --t-display:  clamp(3.05rem, 8.6vw, 7.6rem);
  --t-statement:clamp(2.35rem, 5.4vw, 4.9rem);
  --t-section:  clamp(1.9rem, 3.6vw, 3.1rem);
  --t-lead:     clamp(1.15rem, 1.65vw, 1.5rem);
  --t-h3:       clamp(1.3rem, 1.9vw, 1.7rem);
  --t-body-l:   clamp(1.0625rem, 1.15vw, 1.175rem);
  --t-body:     1.0625rem;
  --t-small:    .9rem;
  --t-micro:    .78rem;
  --t-label:    .69rem;

  --lh-display: .94;
  --lh-tight:   1.06;
  --lh-snug:    1.24;
  --lh-body:    1.62;

  --tr-display: -.035em;
  --tr-tight:   -.022em;
  --tr-body:    -.011em;
  --tr-label:   .17em;

  /* ---- Space ----------------------------------------------------------- */
  --s-1:  .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5:  1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4rem;
  --s-9:  6rem;    --s-10: 8rem;
  --section-y:  clamp(5.5rem, 11vw, 11rem);
  --section-y-lg: clamp(6rem, 10.5vw, 11.5rem);

  /* ---- Container & grid ------------------------------------------------ */
  --max:      1440px;
  --max-text: 62ch;
  --gutter:   clamp(1.25rem, 5vw, 4.5rem);
  --col-gap:  clamp(1rem, 2.2vw, 2rem);

  /* ---- Form ------------------------------------------------------------ */
  --r-sm: 3px;  --r-md: 6px;  --r-lg: 12px;  --r-pill: 999px;
  --border: 1px solid var(--rule);

  /* ---- Motion ---------------------------------------------------------- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --d-fast: 180ms;  --d-mid: 340ms;  --d-slow: 700ms;  --d-reveal: 900ms;

  --z-grain: 1;  --z-menu: 70;  --z-nav: 80;   /* nav above the menu: the close control lives in it */
}

/* The whole system degrades to zero motion, not to broken layout. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 1ms; --d-mid: 1ms; --d-slow: 1ms; --d-reveal: 1ms; }
}

/* Film grain, generated rather than shipped as an image. */
:root {
  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}