/* ==========================================================================
   FOTON — tokens.css
   Design tokens + a minimal reset. Nothing in this file styles a component.

   Load order (BRAND-CONTRACT §8):  bootstrap → tokens → typography → style
   Owner: Agent B.  Type tokens (--t-*) live in typography.css, not here.

   Namespacing: --ft-* (brand), --s-* (space), --t-* (type). Layout/motion
   tokens keep the short names fixed by the build brief (--wrap, --gutter,
   --nav-h, --ease-*, --dur-*, --blur-glass) — none of them collide with
   Bootstrap's --bs-* namespace.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Colour — verbatim from BRAND-CONTRACT §2. Do not re-sample or extend.
   -------------------------------------------------------------------------- */
:root{
  color-scheme: dark;

  /* base surfaces — deep violet-black, NOT neutral grey */
  --ft-bg:        #070311;
  --ft-bg-2:      #0C0520;
  --ft-surface:   #140A28;
  --ft-surface-2: #1C1038;
  --ft-line:      rgba(255,255,255,.085);
  --ft-line-2:    rgba(255,255,255,.16);

  /* brand loop gradient stops */
  --ft-indigo: #2B4BFF;
  --ft-blue:   #1E86FF;
  --ft-cyan:   #22D3EE;
  --ft-violet: #8B2BFF;
  --ft-pink:   #FF2E88;
  --ft-coral:  #FF5A6E;

  /* text */
  --ft-text:  #F3EDFC;
  --ft-muted: #A093C0;
  --ft-dim:   #6E6390;

  /* semantic */
  --ft-up:   #2BE0A6;
  --ft-down: #FF5A6E;
  --ft-warn: #FFB020;

  /* the signature gradient — use sparingly, max 3 places per viewport */
  --ft-grad: linear-gradient(100deg,#2B4BFF 0%,#8B2BFF 34%,#FF2E88 58%,#1E86FF 82%,#22D3EE 100%);
  --ft-grad-soft: linear-gradient(100deg,rgba(43,75,255,.18),rgba(139,43,255,.18),rgba(255,46,136,.14));

  /* radii — deliberately DIFFERENT per hierarchy level, never one value everywhere */
  --r-chip: 999px;
  --r-btn:  14px;
  --r-card: 22px;
  --r-panel:32px;

  /* elevation — glow, not grey drop-shadow. Never rgba(0,0,0,.1). */
  --e-1: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px -24px rgba(139,43,255,.55);
  --e-2: 0 1px 0 rgba(255,255,255,.07) inset, 0 30px 70px -30px rgba(255,46,136,.45);
}


/* --------------------------------------------------------------------------
   2. Space — 10 steps, ~1.45 ratio off an 8px base.
        4 · 8 · 12 · 18 · 26 · 38 · 56 · 82 · 120 · 176

      Steps 1–3 run sub-ratio on purpose: below ~12px a strict 1.45 ratio
      produces values that round to the same device pixel and stop reading as
      distinct. From --s-4 up the ratio holds (18→26→38→56→82→120→176).
      Use these for every gap/padding/margin. No arbitrary px in style.css.
   -------------------------------------------------------------------------- */
:root{
  --s-1:  4px;    /* hairline gaps, icon nudges          */
  --s-2:  8px;    /* chip padding, inline gaps           */
  --s-3:  12px;   /* control padding, tight stacks       */
  --s-4:  18px;   /* card padding (small), paragraph gap */
  --s-5:  26px;   /* card padding, grid gutter           */
  --s-6:  38px;   /* panel padding, block separation     */
  --s-7:  56px;   /* sub-section rhythm                  */
  --s-8:  82px;   /* section padding (mobile)            */
  --s-9:  120px;  /* section padding (desktop)           */
  --s-10: 176px;  /* hero top/bottom, page bookends      */
}


/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
:root{
  --wrap:       1240px;                    /* max content width               */
  --wrap-tight: 940px;                     /* prose / calculator / FAQ column */
  --gutter:     clamp(18px, 4vw, 38px);    /* --s-4 → --s-6; maxes out ~950px */
  --nav-h:      74px;                      /* sticky navbar height            */
}


/* --------------------------------------------------------------------------
   4. Motion — two easings and three durations. Nothing else.
      --ease-out    : everything that settles (fades, reveals, colour)
      --ease-spring : overshoots slightly; buttons, chips, the hero pulse only
   -------------------------------------------------------------------------- */
:root{
  --ease-out:    cubic-bezier(.22,.68,.32,1);
  --ease-spring: cubic-bezier(.34,1.42,.42,1);
  --dur-1: 140ms;   /* state flip: hover, focus, active   */
  --dur-2: 260ms;   /* layout-ish: accordion, offcanvas   */
  --dur-3: 520ms;   /* orchestrated: the one hero moment  */
}


/* --------------------------------------------------------------------------
   5. Stroke, border and glass
   -------------------------------------------------------------------------- */
:root{
  --ft-bw-1: 1px;                              /* default hairline            */
  --ft-bw-2: 1.5px;                            /* emphasised edge / active    */
  --ft-bw-3: 2px;                              /* focus ring, selected plan   */
  --ft-border:   var(--ft-bw-1) solid var(--ft-line);
  --ft-border-2: var(--ft-bw-1) solid var(--ft-line-2);
  --ft-hairline: inset 0 1px 0 rgba(255,255,255,.06);   /* top-edge catchlight */
  --ft-focus:    0 0 0 3px rgba(34,211,238,.38);        /* --ft-cyan @ 38%     */
  --blur-glass:  saturate(160%) blur(18px);             /* navbar / overlays   */
}


/* --------------------------------------------------------------------------
   6. Token overrides at small widths
   -------------------------------------------------------------------------- */
@media (max-width: 640px){
  :root{ --nav-h: 62px; }
}


/* --------------------------------------------------------------------------
   7. Reduced motion — collapse every duration token. Any transition or
      animation that reads its duration from --dur-* is neutralised here, so
      style.css does not need to repeat itself.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  :root{
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}


/* ==========================================================================
   8. Reset — small and deliberate. Component styling belongs in style.css.
   ========================================================================== */

*,
*::before,
*::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  background-color: var(--ft-bg);
  color: var(--ft-text);
}

/* Vertical rhythm is owned by typography.css — start everything at zero. */
h1,h2,h3,h4,h5,h6,
p,figure,blockquote,dl,dd{ margin: 0; }

/* Only lists that have been given a class are treated as UI, not prose. */
ul[class],
ol[class]{ margin: 0; padding: 0; list-style: none; }

img,picture,video,canvas{ max-width: 100%; display: block; }

/* Never let a form control fall back to the UA font. */
input,button,textarea,select{ font: inherit; color: inherit; }

/* Keyboard focus — BRAND-CONTRACT §8. Cyan ring, always visible. */
:focus-visible{
  outline: var(--ft-bw-3) solid var(--ft-cyan);
  outline-offset: 2px;
}
:focus:not(:focus-visible){ outline: none; }

/* Smooth anchor scrolling, gated so it never fights reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior: smooth; }
}

/* Anchored sections must clear the sticky navbar. */
[id]{ scroll-margin-top: var(--nav-h); }