/* ==========================================================================
   ATHERION - BRAND TOKENS
   The palette is quoted verbatim from the official brand sheet. The only
   derived values are alpha tints of #FFFFFF / #DFDFDF / #000000, which add
   no new hue. Nothing here is concept-specific.
   ========================================================================== */

:root {

  /* ---- Official palette ------------------------------------------------ */
  --blue:      #0129E5;   /* PRIMARY */
  --blue-2:    #1739E5;   /* secondary - interactive / hover */
  --blue-3:    #2F2DB5;   /* secondary - gradient partner */
  --navy:      #02195C;   /* MecAI ground, sampled from the lockup */
  --black:     #000000;
  --grey:      #595959;
  --grey-lt:   #DFDFDF;
  --white:     #FFFFFF;

  /* ---- Ink -------------------------------------------------------------
     CONTRAST LAW: #0129E5 on #000000 is 1.9:1. Blue is a LINE, FILL and
     GROUND colour on dark; it is a TEXT colour only on light grounds.     */
  --ink:       #FFFFFF;
  --ink-2:     #DFDFDF;
  --ink-3:     rgba(223,223,223,.66);
  --ink-4:     rgba(223,223,223,.42);
  --ink-5:     rgba(223,223,223,.20);

  --ink-dk:    #000000;
  --ink-dk-2:  #2B2B2B;
  --ink-dk-3:  #595959;

  --rule:      rgba(255,255,255,.16);
  --rule-2:    rgba(255,255,255,.08);
  --rule-dk:   rgba(0,0,0,.14);
  --rule-dk-2: rgba(0,0,0,.07);

  /* ---- Grounds --------------------------------------------------------- */
  --ground:    #000000;

  /* ---- Brand gradients, measured off the reference assets --------------- */
  --grad-brand:    linear-gradient(180deg, #2F2DB5 0%, #000000 46%);
  --grad-wordmark: linear-gradient(90deg, #FFFFFF 0%, #595959 100%);
  --grad-navy:     radial-gradient(ellipse 65% 50% at 50% 0%, #072387 0%, #02195C 58%);
  --grad-edge:     linear-gradient(180deg, transparent 0%, rgba(0,0,0,.86) 78%);

  /* ---- Blueprint grid (≈4% lift, matching the MecAI asset) -------------- */
  --grid-line: rgba(255,255,255,.045);
  --grid-size: 84px;

  /* ---- Typography ------------------------------------------------------
     Neue Montreal is licensed + self-hosted (fonts.css). Until those files
     land the stack falls to Helvetica Neue / Arial - Arial being the brand's
     own sanctioned secondary face.                                        */
  --font: 'Neue Montreal', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --t-mega:  clamp(48px, 9.2vw, 168px);
  --t-xl:    clamp(40px, 7vw, 124px);
  --t-lg:    clamp(31px, 4.6vw, 78px);
  --t-md:    clamp(24px, 3.2vw, 46px);
  --t-sm:    clamp(19px, 1.9vw, 26px);
  --t-lead:  clamp(17px, 1.45vw, 21px);
  --t-body:  16.5px;
  --t-cap:   14px;
  --t-tag:   11px;

  --lh-mega: .92;   /* was .82 - too tight to contain a descender */
  --lh-xl:   .95;
  --lh-lg:   1.0;
  --lh-body: 1.65;

  --ls-mega: -.055em;
  --ls-xl:   -.045em;
  --ls-lg:   -.035em;
  --ls-tag:  .2em;

  --w-lt: 300;
  --w-rg: 400;
  --w-md: 500;

  /* ---- Status ------------------------------------------------------------
     The one sanctioned departure from the seven brand values, requested for
     roadmap/status legibility. Desaturated and value-matched to #1739E5 so
     they read as part of the system rather than pasted-on badges. Each is
     used as a 12% fill, a 34% hairline and a lightened label. */
  --st-live: #34C27E;   /* Now Live    */
  --st-prog: var(--blue-2); /* In Progress */
  --st-soon: #DDAE3F;   /* Upcoming    */

  /* ---- Corner radius ----------------------------------------------------
     One scale, site-wide. Deliberately restrained: panels should read as
     contained and considered, never as bubbly SaaS cards. */
  --r-sm:  6px;    /* buttons, chips, small controls   */
  --r-md: 12px;    /* media frames, contained strips   */
  --r-lg: 18px;    /* major panels and modules         */

  /* ---- Space ------------------------------------------------------------ */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: clamp(28px, 2.5vw, 36px);
  --s5: clamp(40px, 4vw, 56px);
  --s6: clamp(56px, 5.5vw, 80px);
  --s7: clamp(80px, 8vw, 120px);
  --s8: clamp(104px, 11vw, 168px);

  /* One content frame for nav, sections and footer. --page-edge is the
     resolved content edge and also gives fixed ornaments a stable anchor. */
  --gut:  clamp(20px, 4vw, 72px);
  --max:  1680px;
  --page-edge: max(var(--gut), calc((100vw - var(--max)) / 2));
  --section-pad: clamp(64px, 7vw, 112px);
  --section-pad-tight: clamp(40px, 4vw, 64px);
  --section-pad-loose: clamp(88px, 9vw, 144px);
  --nav-h: 68px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease:      cubic-bezier(.16, 1, .30, 1);
  --ease-io:   cubic-bezier(.62, .04, .30, 1);
  --dur-1: .35s;
  --dur-2: .7s;
  --dur-3: 1.1s;

  --z-media: 1;
  --z-body:  2;
  --z-rail:  50;
  --z-nav:   100;
  --z-menu:  110;
  --z-cookie: 200;
}

@media (max-width: 900px) {
  :root {
    --grid-size: 56px;
    --nav-h: 60px;
    --section-pad: clamp(56px, 9vw, 80px);
    --section-pad-tight: clamp(36px, 6vw, 52px);
    --section-pad-loose: clamp(72px, 11vw, 104px);
  }
}
@media (max-width: 560px) {
  :root { --t-body: 16px; --lh-mega: .92; --ls-mega: -.04em; }
}