/* ═══════════════════════════════════════════════════════════
   Blue Arctic · Design Tokens
   Single source of truth for color, type, space, radius,
   elevation and motion. Every other stylesheet consumes these.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Color · Arctic neutrals ─────────────────────────── */
  --navy-950: #081420;   /* footer, deepest surfaces            */
  --navy-900: #0C1D2E;   /* dark bands                          */
  --navy-800: #12283D;   /* dark card surfaces                  */
  --navy-700: #1B3A55;   /* dark borders / hover surfaces       */

  --ink:      #14283C;   /* primary text                        */
  --ink-2:    #43607B;   /* secondary text                      */
  --ink-3:    #546F8A;   /* tertiary text / meta: AA (4.5:1+) on paper/mist/frost */

  --paper:    #FFFFFF;
  --mist:     #F7F9FA;   /* soft section background: neutral cool gray (blue reserved for accents) */
  --frost:    #EFF2F5;   /* deeper wash / hover fills: neutral    */
  --line:     #E3E9EE;   /* hairline borders: neutral             */
  --line-2:   #CFD9E2;   /* stronger borders                      */

  /* ── Color · Brand blue + ice accents ────────────────── */
  --blue-700: #0E4DBB;
  --blue-600: #1560E8;   /* primary actions                     */
  --blue-500: #2D79F5;   /* hover / links on dark               */
  --blue-100: #E3EEFD;   /* selected fills                      */
  --sky-400:  #5FB9EE;   /* arctic accent                       */
  --ice-200:  #C9E7F8;
  --ice-100:  #E6F3FB;

  --ok-600:   #0E9F6E;   /* checkmarks, live status             */
  --star:     #C67F10;   /* review stars: amber, WCAG 2.2 AA non-text 3.26:1 on white */

  /* ── Color · Carbon scale (internal hero system) ─────── */
  /* Cool-cast neutrals, never navy, so blue stays an accent.
     Text contrast below is measured against --carbon-900. */
  --carbon-950: #0A0B0C;  /* deepest matte black: hero base top     */
  --carbon-900: #101215;  /* primary carbon surface                 */
  --carbon-850: #16191D;  /* hero base bottom / raised panels       */
  --carbon-800: #1D2126;  /* card surfaces on carbon                */
  --carbon-700: #2A2F36;  /* borders, dividers, hover surfaces      */

  --silver-100: #E7EAEE;  /* headings on carbon: 15.6:1  AAA        */
  --steel-200:  #C6CCD3;  /* body copy on carbon: 11.4:1  AAA       */
  --steel-400:  #8A939E;  /* meta / eyebrow on carbon: 5.5:1  AA    */

  --carbon-hair: rgba(255,255,255,.09);  /* hairline on carbon      */
  --carbon-key:  rgba(233,240,247,.06);  /* ambient key-light alpha */

  /* ── Brand signature ─────────────────────────────────── */
  /* Peak-and-wave mark, used as a CSS mask so it can carry any gradient or color. */
  --brand-peak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M11 1.7 C11.5 1.1 12.3 1.1 12.7 1.7 L22.5 18.6 C23.1 19.6 22.4 20.8 21.3 20.8 C15.9 20.8 15.1 16.9 10.9 17.3 C7.6 17.6 7 20.8 2.7 20.8 C1.6 20.8 0.9 19.6 1.5 18.6 Z'/%3E%3C/svg%3E");

  /* Ambient washes for hero and panels. */
  --wash-hero: radial-gradient(1100px 520px at 82% -10%, rgba(95,185,238,.09), transparent 60%),
               radial-gradient(700px 420px at -8% 22%, rgba(21,96,232,.04), transparent 55%);

  /* ── Typography ──────────────────────────────────────── */
  --font-display: "Manrope", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero:  clamp(2.4rem, 4.6vw, 3.45rem);
  --fs-h2:    clamp(1.95rem, 3.2vw, 2.7rem);
  --fs-h3:    clamp(1.35rem, 2.1vw, 1.7rem);
  --fs-h4:    1.1875rem;
  --fs-lead:  clamp(1.1rem, 1.5vw, 1.275rem);
  --fs-body:  1.0625rem;
  --fs-small: .9375rem;
  --fs-tiny:  .875rem;

  --lh-tight: 1.08;
  --lh-head:  1.16;
  --lh-body:  1.7;

  /* ── Space (8px scale) ───────────────────────────────── */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 5.5rem;  --sp-10: 7rem;

  /* ── Vertical rhythm scale ───────────────────────────────
     One scale owns every vertical gap. Values are per-side:
     adjacent sections each contribute their own padding, so the
     visible gap is the SUM (md+md = 96px, the default). For a
     different gap use a modifier class (.section--tight /
     --connected / --spacious in base.css), never a one-off margin. */
  --space-section-xl: 5.5rem;    /* 88 */
  --space-section-lg: 3.75rem;   /* 60 */
  --space-section-md: 3rem;      /* 48: default */
  --space-section-sm: 1.5rem;    /* 24 */
  --space-band:       2rem;      /* 32: trust rows, notes, minor bands */
  --space-component:  2rem;      /* 32: heading block → the content it introduces */
  --space-card-gap:   1.375rem;  /* 22: gap inside every card grid */

  /* Legacy alias: rules still calling var(--section-pad) inherit the rhythm scale. */
  --section-pad: var(--space-section-md);

  --container: 76rem;          /* 1216px */
  --container-pad: clamp(1.25rem, 4vw, 2rem);

  /* ── Radius ──────────────────────────────────────────── */
  --r-sm: .625rem;
  --r-md: 1.125rem;   /* 18px */
  --r-lg: 1.375rem;   /* 22px: cards */
  --r-xl: 2rem;
  --r-pill: 999px;
  --r-btn: 999px;  /* buttons: full pill */

  /* ── Elevation ───────────────────────────────────────── */
  --shadow-soft: 0 2px 4px rgba(8, 25, 45, .04), 0 14px 36px -20px rgba(8, 25, 45, .16);
  --shadow-lift: 0 3px 6px rgba(8, 25, 45, .04), 0 26px 56px -22px rgba(8, 25, 45, .22);
  --shadow-panel: 0 4px 10px rgba(8, 25, 45, .06), 0 28px 60px -24px rgba(8, 25, 45, .3);

  /* ── Motion ──────────────────────────────────────────── */
  --ease-out: cubic-bezier(.22, .8, .32, 1);
  --dur-fast: 160ms;
  --dur-med:  300ms;
  --dur-slow: 550ms;

  /* ── Layout constants ────────────────────────────────── */
  --header-h: 5rem;
  --announce-h: 2.5rem;

  /* ── Header seam ─────────────────────────────────────── */
  /* .header-dark paints itself with this so announce bar, header and
     hero read as one canvas; a page sets --header-dark-bg on <body>
     to move the seam without touching header markup. */
  --header-dark-bg: var(--navy-900);

  /* ── Hero system ─────────────────────────────────────── */
  /* Shared by every hero variant (hero.css); page-level overrides go
     on the hero element, never in page CSS. */
  --hero-pad-top:    clamp(2.75rem, 5vw, 4.5rem);
  --hero-pad-bottom: clamp(2.5rem, 4.5vw, 3.75rem);
  --hero-gap:        clamp(2rem, 5vw, 4.25rem);
  --hero-stack:      clamp(.95rem, 1.4vw, 1.2rem);  /* rhythm between hero rows */
  --hero-fs-h1:      clamp(2.2rem, 4.2vw, 3.3rem);
  --hero-measure:    36rem;    /* lead copy max width */
}

/* ── Vertical rhythm · responsive steps ────────────────────
   Steps down at two breakpoints rather than clamp(), so the section
   gap is predictable at each width: 96px / 72px / 56px. */
@media (max-width: 900px) {
  :root {
    --space-section-xl: 4rem;      /* 64 */
    --space-section-lg: 3rem;      /* 48 */
    --space-section-md: 2.25rem;   /* 36 */
    --space-section-sm: 1.25rem;   /* 20 */
    --space-band:       1.5rem;
    --space-component:  1.5rem;
    --space-card-gap:   1.125rem;  /* 18 */
  }
}
@media (max-width: 560px) {
  :root {
    --space-section-xl: 3rem;      /* 48 */
    --space-section-lg: 2.25rem;   /* 36 */
    --space-section-md: 1.75rem;   /* 28 */
    --space-section-sm: 1rem;      /* 16 */
    --space-band:       1.25rem;
    --space-component:  1.25rem;
    --space-card-gap:   1rem;      /* 16 */
  }
}