/* =========================================================================
   GRENADIER COMPUTING — DESIGN TOKENS + BASE
   The ocean-depth design language. Loaded first on every page.
   ========================================================================= */

/* --- Self-hosted brand fonts (Latin subset, woff2) --- */
@font-face { font-family:'Sofia Pro'; src:url('../fonts/sofia-pro-black.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Sofia Pro'; src:url('../fonts/sofia-pro-light.woff2') format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-400.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-500.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('../fonts/poppins-600.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root{
  /* Depth scale: surface -> abyss */
  --foam:#EAFBFD; --shallow:#BFEFF4; --shallow-2:#8FE0EA; --aqua:#22D3EE; --aqua-bright:#5EEAD4;
  --teal:#0E7490; --teal-deep:#0A4D63; --deep:#072F42; --ink:#06182A; --abyss:#030E18;

  /* Semantic */
  --text-on-light:#06182A; --text-on-light-muted:#41566B;
  --text-on-dark:rgba(255,255,255,.94); --text-on-dark-muted:rgba(255,255,255,.68);
  --hairline-dark:rgba(255,255,255,.14); --hairline-light:rgba(6,24,42,.1);
  --focus:#5EEAD4;
  --glass:rgba(255,255,255,.045); --glass-hover:rgba(255,255,255,.07);

  /* Type */
  --font-display:'Sofia Pro','Poppins',system-ui,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;

  /* Spacing (4px base) */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --space-12:48px; --space-16:64px; --space-24:96px;
  --space-section:clamp(72px,9vw,128px);

  /* Radius / elevation / motion */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;
  --shadow-soft:0 18px 50px -20px rgba(3,14,24,.45);
  --ease:cubic-bezier(.22,.61,.36,1); --dur:.7s;
}

/* --- Reset + base --- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--text-on-light);background:var(--ink);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:900;line-height:1.06;letter-spacing:-.02em}
a{color:inherit}

/* --- Layout primitives --- */
.wrap{width:min(1180px,100% - 48px);margin-inline:auto}
.narrow{max-width:900px;margin-inline:auto}
.center{text-align:center}
section{position:relative;padding:var(--space-section) 0}

/* --- Type helpers --- */
.u-light{font-family:var(--font-display);font-weight:300;letter-spacing:0}
.eyebrow{font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.26em;text-transform:uppercase}
.lead{font-size:clamp(1.05rem,2vw,1.25rem)}
.muted-light{color:var(--text-on-light-muted)}
.muted-dark{color:var(--text-on-dark-muted)}
.text-aqua{background:linear-gradient(95deg,var(--aqua-bright),var(--aqua) 55%,#38BDF8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  padding-bottom:.22em;padding-right:.08em;margin-right:-.08em}

/* --- Depth zones (compose a page's descent from these) --- */
.zone-surface{background:linear-gradient(170deg,var(--foam),var(--shallow) 60%,var(--shallow-2));color:var(--text-on-light)}
.zone-shallow{background:linear-gradient(180deg,var(--shallow-2),#5BC9D8);color:var(--text-on-light)}
.zone-light{background:linear-gradient(180deg,#EAF7F9,#D6EEF2);color:var(--text-on-light)}
.zone-brink{background:linear-gradient(180deg,#CFEFF3,#6FD0DC);color:var(--text-on-light)}
.zone-dive{background:linear-gradient(180deg,#6FD0DC 0%,var(--teal) 22%,var(--ink) 100%);color:var(--text-on-dark)}
.zone-plunge{background:linear-gradient(180deg,var(--teal) 0%,var(--teal-deep) 30%,var(--ink) 100%);color:var(--text-on-dark)}
/* Gradual descent: teal mid-water -> deep -> ink (reserve ink/abyss for lower down) */
.zone-mid{background:linear-gradient(180deg,#1187A4 0%,var(--teal-deep) 100%);color:var(--text-on-dark)}
.zone-mid-deep{background:linear-gradient(180deg,var(--teal-deep) 0%,var(--deep) 100%);color:var(--text-on-dark)}
.zone-deepen{background:linear-gradient(180deg,var(--deep) 0%,var(--ink) 100%);color:var(--text-on-dark)}
.zone-deep{background:linear-gradient(180deg,var(--ink),var(--deep));color:var(--text-on-dark)}
.zone-deep-up{background:linear-gradient(180deg,var(--deep),var(--ink));color:var(--text-on-dark)}
.zone-ink{background:var(--ink);color:var(--text-on-dark)}
.zone-abyss{background:linear-gradient(180deg,var(--ink),var(--abyss));color:var(--text-on-dark)}
[class*="zone-"].on-dark h1,[class*="zone-"].on-dark h2,[class*="zone-"].on-dark h3,[class*="zone-"].on-dark h4{color:#fff}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}

/* --- Motion --- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- Focus --- */
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}