/*
 * Adren — the client design tokens, as the website loads them.
 *
 * A copy of docs/design/client/tokens.css. tests/test_site.py fails if any rule here differs
 * from that file: change the design system first, then copy it here.
 *
 * Fonts: Inter Tight and Cormorant, SIL Open Font License 1.1, in ./fonts with their licences.
 * They stand in for Creo and Neura Display, which have no licence on file.
 */

/* derived · the open stand-ins */
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight/InterTight[wght].ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant";
  src: url("fonts/cormorant/Cormorant[wght].ttf") format("truetype");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

:root{
  /* colour */
  --ink-950:#0A0B08; --night-900:#11130D; --moss-800:#1A1D14; --moss-700:#262A1B;
  --lichen-500:#6B7046; --sage-300:#A9AE86; --champagne-200:#DCE2A6; --signal:#C8FF3D;
  --bone-50:#ECE8DF; --paper:#F7F5EF;
  --text-1:var(--bone-50); --text-2:rgb(236 232 223 / .68); --text-3:rgb(236 232 223 / .45);
  --hairline:rgb(236 232 223 / .08); --hairline-strong:rgb(236 232 223 / .14);
  /* type */
  --font-sans:"Creo", "Inter Tight", system-ui, sans-serif;
  --font-accent:"Neura Display", "Cormorant", serif;
  --font-label:var(--font-sans); /* caps, 500, +.08em, tabular-nums. NO monospace fonts anywhere */
  /* radius */
  --r-pill:999px; --r-hero:28px; --r-card:24px; --r-tile:16px; --r-input:10px;
  /* glass */
  --glass-fill:rgb(26 29 20 / .55);
  --glass-blur:blur(24px) saturate(140%);
  --glass-edge:inset 0 1px 0 rgb(236 232 223 / .10), inset 0 0 0 1px rgb(236 232 223 / .08);
  --shadow-lg:0 30px 80px -20px rgb(0 0 0 / .55), 0 8px 24px -12px rgb(0 0 0 / .5);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:180ms; --t-reveal:600ms;
}

/* Headline: two voices */
.h-display{font:400 72px/1.05 var(--font-sans);letter-spacing:-.03em;color:var(--text-1);text-wrap:balance}
.h-display .accent{display:block;font-family:var(--font-accent);font-weight:300;color:var(--champagne-200);letter-spacing:-.02em}

/* derived · Label: caps, 500, +8% tracking, Bone 50%, tabular numerals, no monospace */
.label{font:500 12px/16px var(--font-label);letter-spacing:.08em;text-transform:uppercase;
  color:rgb(236 232 223 / .5);font-variant-numeric:tabular-nums}

/* Badge pill */
.badge{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 6px;border-radius:var(--r-pill);
  background:rgb(236 232 223 / .05);box-shadow:var(--glass-edge);backdrop-filter:var(--glass-blur);
  font:400 14px/1 var(--font-sans);color:rgb(236 232 223 / .85)}
.badge__orb{width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#F4F6DA 0%,var(--champagne-200) 38%,var(--lichen-500) 100%);
  box-shadow:0 0 12px rgb(220 226 166 / .55),0 0 2px rgb(220 226 166 / .9)}

/* Buttons — two sizes only: 52 (lg) and 44 (md) */
.btn{--h:52px;display:inline-flex;align-items:center;gap:10px;height:var(--h);padding:0 22px 0 24px;
  border-radius:var(--r-pill);font:500 15px/1 var(--font-sans);letter-spacing:-.01em;border:0;cursor:pointer;
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.btn--md{--h:44px;padding:0 18px 0 20px;font-size:14px}
.btn__arrow{width:14px;height:14px;transition:transform var(--t-fast) var(--ease)}
.btn:hover .btn__arrow{transform:translate(2px,-2px)}
.btn:active{transform:scale(.98)}
.btn:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.btn--primary{background:var(--paper);color:var(--ink-950);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgb(0 0 0 / .4),0 10px 30px -10px rgb(220 226 166 / .35)}
.btn--primary:hover{background:#fff;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgb(0 0 0 / .4),0 14px 40px -10px rgb(220 226 166 / .55)}
.btn--glass{background:rgb(236 232 223 / .06);color:var(--text-1);box-shadow:var(--glass-edge);backdrop-filter:var(--glass-blur)}
.btn--glass:hover{background:rgb(236 232 223 / .10)}
.btn--ghost{background:transparent;color:rgb(236 232 223 / .8);padding:0 16px}
.btn--ghost:hover{color:var(--text-1)}

/* Glass card */
.card{position:relative;border-radius:var(--r-card);background:var(--glass-fill);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-edge),var(--shadow-lg);padding:28px;overflow:hidden}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgb(236 232 223 / .06),transparent 38%)}
.tile{border-radius:var(--r-tile);background:rgb(10 11 8 / .45);box-shadow:inset 0 0 0 1px var(--hairline);padding:16px}
/* derived · Fallback for no backdrop-filter: Moss 800 at 92% */
@supports not (backdrop-filter: blur(1px)) { .card, .badge, .btn--glass, .nav__cap { background: rgb(26 29 20 / .92); } }

/* Nav — three capsules */
.nav{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:24px auto 0}
.nav__cap{display:flex;align-items:center;gap:4px;height:52px;padding:6px;border-radius:16px;
  background:rgb(236 232 223 / .05);box-shadow:var(--glass-edge);backdrop-filter:var(--glass-blur)}
.nav__link{height:40px;padding:0 14px;border-radius:12px;display:flex;align-items:center;font:400 15px var(--font-sans);color:var(--text-2)}
.nav__link[aria-current]{background:rgb(236 232 223 / .08);color:var(--text-1)}

/* Architect guide lines with node dots */
.frame{position:relative;max-width:1280px;margin:0 auto;border-inline:1px solid var(--hairline)}
.frame__rule{height:1px;background:var(--hairline);position:relative}
.frame__rule::before,.frame__rule::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:rgb(236 232 223 / .28)}
.frame__rule::before{left:-3px}.frame__rule::after{right:-3px}

/* Section glow + grain */
.section{position:relative;padding:160px 0;background:
  radial-gradient(60% 50% at 20% 0%,rgb(107 112 70 / .28),transparent 70%),var(--ink-950)}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  background-image:url(noise.png)}  /* 256px tileable monochrome noise */

/* Live dot — the one lime */
.live{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 0 0 rgb(200 255 61 / .5);
  animation:live 2.4s var(--ease) infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgb(200 255 61 / .45)}70%,100%{box-shadow:0 0 0 8px rgb(200 255 61 / 0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}