/* ==========================================================================
   Trexa - Foundation
   Tokens, base, layout primitives, buttons, cards, breakpoint system.
   Component styles live in components.css. Nothing here is page-specific.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   Brand identity unchanged: blue -> teal -> green.
   The "ramp" values were previously 17 loose hex literals in markup.
   They are contrast-checked against white at >= 4.5:1 and now named.
   -------------------------------------------------------------------------- */
:root{
  /* brand core */
  --navy:#0f172a;
  --navy-deep:#0a1120;
  --blue:#1e77d2;
  --blue-lt:#2e8ed9;
  --teal:#1b7189;
  --green:#70c88a;
  --green-lt:#82d48b;

  /* contrast-safe sequence ramp (white text passes AA on every step) */
  --ramp-1:#1668bd;
  --ramp-2:#1c78c4;
  --ramp-3:#2287b2;
  --ramp-4:#21808c;
  --ramp-5:#1e7a70;
  --ramp-6:#22855a;
  --ramp-7:#2a9160;
  --ramp-8:#3d9e6a;

  /* four-step ramp used by the ring and phase groups */
  --phase-1:#1668bd;
  --phase-2:#17708c;
  --phase-3:#1c7f66;
  --phase-4:#27804a;

  /* neutrals */
  --slate:#64748b;
  --body:#475569;
  --muted:#7d8ca3;
  /* body + muted copy for dark grounds. 7.4:1 and 6.7:1 on --navy. */
  --on-dark:#9aa8bd;
  --on-dark-muted:#8fa0b8;
  --hair-dark:rgba(255,255,255,.14);
  --line:#e2e8f0;
  --line-strong:#cbd8e6;
  --wash:#f5f8fb;
  --white:#fff;

  /* gradient */
  --grad:linear-gradient(100deg,#1e77d2 0%,#2e8ed9 38%,#4aa9a4 68%,#70c88a 100%);

  /* type scale - fluid, one family */
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --fs-xs:12.5px;
  --fs-sm:14px;
  --fs-base:15.5px;
  --fs-md:17px;
  --fs-detail:16.5px;
  --fs-lg:clamp(17px,1.3vw,19px);
  --fs-h3:clamp(18px,1.5vw,21px);
  --fs-h2:clamp(28px,3.1vw,44px);
  --fs-h1:clamp(34px,4.2vw,58px);
  --fs-display:clamp(30px,3.6vw,50px);

  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-body:1.62;
  --ls-tight:-.033em;
  --ls-snug:-.02em;
  --ls-wide:.13em;

  /* spacing scale */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:34px;
  --sp-6:48px;
  --sp-7:64px;
  --sp-8:88px;
  --sp-9:120px;

  /* radii */
  --r-xs:8px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:24px;
  --r-xl:28px;
  --r-2xl:40px;
  --r-pill:999px;

  /* elevation */
  --sh-sm:0 1px 3px rgba(15,23,42,.12);
  --sh-md:0 18px 36px rgba(10,17,32,.34);
  --sh-lg:0 40px 80px rgba(5,10,22,.55);

  /* ------------------------------------------------------------------
     CONTAINER SYSTEM - resolves the 1600 vs 1380 disagreement.
     Two intentional tiers, not one compromise:
       --w-frame   chrome that is meant to sit wider than text
                   (floating nav card, hero band, footer band)
       --w-content reading and grid content
                   (matches theme.json wideSize exactly)
       --w-prose   long-form measure, capped by characters not pixels
     ------------------------------------------------------------------ */
  --w-frame:1600px;
  --w-content:1380px;
  --w-prose:74ch;

  --gutter:52px;
  --gutter-sm:32px;
  --gutter-xs:20px;
}

/* --------------------------------------------------------------------------
   2. BREAKPOINT SYSTEM
   Four deliberate stops, replacing nine ad-hoc ones.
   Custom properties cannot be used inside media queries, so the scale is
   documented here and the literal values are used consistently everywhere.

     1400px  xl  desktop -> narrow desktop   (gutters tighten)
     1120px  lg  small laptop / tablet landscape
                 THE CRITICAL STOP. Nav becomes the drawer here AND every
                 multi-column grid steps down here, in one move. The old
                 build switched nav at 1080 but held grids to 1180, which
                 is what made 900-1080 the weakest range.
      900px  md  tablet portrait  (two columns -> one, tables reflow)
      640px  sm  phone            (final padding tightening)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--navy);
  color:var(--white);
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:0;background:none;cursor:pointer;color:inherit}
img,svg{max-width:100%}
img{height:auto}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:var(--r-xs)}
.u-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --------------------------------------------------------------------------
   4. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.frame{max-width:var(--w-frame);margin-inline:auto;padding-inline:var(--gutter)}
.shell{max-width:var(--w-frame);margin-inline:auto;padding:var(--sp-4)}
.content{max-width:var(--w-content);margin-inline:auto}
.prose{max-width:var(--w-prose)}

.section{padding-block:var(--sp-8)}
.section--flush-top{padding-top:0}
.section--tight{padding-block:var(--sp-6)}
.section--lite{background:var(--white);color:var(--navy)}
.section--lite-top{border-radius:var(--r-2xl) var(--r-2xl) 0 0}
.section--wash{background:var(--wash);color:var(--navy)}

/* section intro primitive */
.intro{max-width:68ch;margin-bottom:var(--sp-6)}
.intro__eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--slate);margin:0 0 var(--sp-2);
}
.intro__title{
  font-size:var(--fs-h2);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  font-weight:700;margin:0 0 var(--sp-3);max-width:24ch;
}
.intro__lede{font-size:var(--fs-lg);line-height:var(--lh-body);margin:0;color:var(--body)}
.intro__lede--onDark{color:#9aa8bd}

/* --------------------------------------------------------------------------
   5. BUTTONS - one base, four variants, one size modifier
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-size:var(--fs-md);font-weight:600;line-height:1;
  padding:17px 30px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;text-align:center;
  transition:background .18s ease,border-color .18s ease,filter .18s ease,transform .18s ease;
}
.btn--primary{background:var(--grad);color:var(--white)}
.btn--primary:hover{filter:brightness(1.07)}
.btn--secondary{background:var(--navy);color:var(--white)}
.btn--secondary:hover{background:#1c2a45}
.btn--ghost{border-color:rgba(255,255,255,.2);color:var(--white)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--ghost-dark{border-color:var(--line-strong);color:var(--navy)}
.btn--ghost-dark:hover{background:var(--wash)}
.btn--sm{font-size:var(--fs-sm);padding:13px 21px}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.6;cursor:progress}
.btn-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.btn-row--center{justify-content:center}

/* --------------------------------------------------------------------------
   6. CARDS - shared foundation, modifiers for difference.
   Deliberately not a single visual style; a single technical base.
   -------------------------------------------------------------------------- */
.card{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--sp-4);
  background:var(--white);
  color:var(--navy);
}
.card--tint{background:var(--wash)}
.card--flush{border:0;padding:0;background:none}
.card--pad-lg{padding:var(--sp-5)}
.card--pad-sm{padding:var(--sp-3)}
.card--clip{overflow:hidden;padding:0}
.card--interactive{transition:border-color .18s ease,transform .18s ease}
.card--interactive:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card__title{font-size:var(--fs-h3);font-weight:700;letter-spacing:var(--ls-snug);margin:var(--sp-3) 0 var(--sp-2);line-height:var(--lh-snug)}
.card__text{font-size:var(--fs-base);line-height:1.6;color:var(--body);margin:0}
.card__tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;
}

/* card grid primitive */
.grid-cards{display:grid;gap:var(--sp-4)}
.grid-cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}

/* --------------------------------------------------------------------------
   7. MOTION - reveal system. Opt-in, and fully disabled under reduced motion.
   -------------------------------------------------------------------------- */
/* The hidden state only exists when JavaScript is present to remove it.
   Without .trexa-js (no-JS, or the editor canvas) the final state renders. */
.trexa-js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.trexa-js .reveal.is-visible{opacity:1;transform:none}
.reveal--d1{transition-delay:.07s}
.reveal--d2{transition-delay:.14s}
.reveal--d3{transition-delay:.21s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1!important;transform:none!important}
}

/* --------------------------------------------------------------------------
   8. FOUNDATION RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:1400px){
  :root{--gutter:40px}
}
@media(max-width:1120px){
  :root{--gutter:var(--gutter-sm)}
  .section{padding-block:var(--sp-7)}
  .grid-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .grid-cards--2,.grid-cards--3,.grid-cards--4{grid-template-columns:1fr}
  .intro{margin-bottom:var(--sp-5)}
}
@media(max-width:640px){
  :root{--gutter:var(--gutter-xs)}
  .shell{padding:var(--sp-3)}
  .section{padding-block:var(--sp-6)}
  .btn{padding:15px 24px}
}