/* tokens.css - the redesign layer of src/styles/tokens.css (the measured source evidence above its marker is not shipped; see docs/BUILD-NOTES.md) */
/* =====================================================================================================
   REDESIGN TOKENS - "Daylight Canopy" (docs/DESIGN-SPEC.md section 2, docs/BRAND-SYSTEM.md sections 5-10).
   The block above is the MEASURED SOURCE BASELINE written by sr-tokens.mjs: evidence the gate reads,
   kept verbatim and never used by the redesign. Everything below is the redesign's token layer, and it
   is the only place a colour literal may appear: site.css and motion.css use var() only.
   Derived values are sRGB mixes of measured source colours (BRAND-SYSTEM 5; DESIGN-SPEC 2.1).
   ===================================================================================================== */
:root {
  /* --- palette: BRAND-SYSTEM section 5, verbatim --------------------------------------------------- */
  --green-50:  #f8faf2;
  --green-100: #eef4e2;
  --green-200: #ddeac5;
  --green-300: #bdd58f;
  --green-400: #94bc4a; /* brand anchor: footer green, logo "e" */
  --green-500: #759b2a; /* brand anchor: top bar, bands */
  --green-600: #53760d;
  --green-700: #446600; /* source nav divider */
  --green-800: #314900;
  --green-900: #233500;
  --green-950: #141f00;
  --ink-950: #232229;
  --ink-900: #313039;
  --ink-700: #464451; /* source body text */
  --ink-600: #5c5a66;
  --ink-500: #6b6974;
  --ink-300: #acabb1;
  --ink-200: #d1d0d4;
  --ink-100: #e9e9ea;
  --ink-50:  #f6f6f6;
  --slate-700: #36565e;
  --slate-900: #1d2e33;
  --alert:    #941221;
  --alert-50: #f8eeef;
  --paper:  #ffffff;
  --ground: #fafcf6;
  --stone:  #efefef;
  --field-lime: #cfe1ae;
  --field-teal: #dfe4e5;
  --field-leaf: rgb(117 155 42 / .18);
  --focus:         #446600;
  --focus-on-band: #141f00;
  --focus-on-dark: #d4e4b7;
  --shade: 20 31 0;

  /* --- DESIGN-SPEC 2.1 additions ------------------------------------------------------------------- */
  --sunlight:         #fffbe9;
  --pool-sun:         #fff5d6;
  --pool-mint:        #e2ebd1;
  --field-lime-deep:  #85ac3a;
  --field-lime-light: #a9c96e;
  --band-pool:        #668b1d;
  --band-pool-0:      rgb(102 139 29 / 0);
  /* stage and band stops (DESIGN-SPEC 3.3, 3.6; all at or above the recipe-B floor L 0.702) */
  --stage-1: #f6faee;
  --stage-2: #e8f1d6;
  --stage-3: #dbe9c1;
  --svc-band-2: #e5efd2;
  --svc-band-3: #eaf2dc;
  --field-top: #fbfdf6;
  --field-bottom: #f6f9ef;
  --mask: #000000; /* mask-image ink only, never painted */

  /* --- translucent steps (named by source colour and alpha) ---------------------------------------- */
  --w-12: rgb(255 255 255 / .12);
  --w-20: rgb(255 255 255 / .20);
  --w-82: rgb(255 255 255 / .82);
  --w-85: rgb(255 255 255 / .85);
  --w-90: rgb(255 255 255 / .90);
  --sun-95: rgb(255 251 233 / .95);
  --sun-0:  rgb(255 251 233 / 0);
  --lime-80: rgb(207 225 174 / .8);
  --lime-0:  rgb(207 225 174 / 0);
  --teal-80: rgb(223 228 229 / .8);
  --teal-0:  rgb(223 228 229 / 0);
  --g1-90: rgb(238 244 226 / .90);
  --g1-95: rgb(238 244 226 / .95);
  --g2-14: rgb(221 234 197 / .14);
  --g3-60: rgb(189 213 143 / .60);
  --g4-16: rgb(148 188 74 / .16);
  --g4-45: rgb(148 188 74 / .45);
  --g4-50: rgb(148 188 74 / .50);
  --g5-0:  rgb(117 155 42 / 0);
  --g5-12: rgb(117 155 42 / .12);
  --g5-25: rgb(117 155 42 / .25);
  --sh-12: rgb(20 31 0 / .12);
  --scrim: rgb(20 31 0 / .32);
  --iris-a: rgb(68 102 0 / .55);
  --iris-b: rgb(148 188 74 / .35);
  --spec-hi: rgb(255 255 255 / .42);
  --spec-lo: rgb(255 255 255 / 0);
  --spec-dark: rgb(189 213 143 / .10);

  /* --- elevation: every shadow is green-tinted (DESIGN-SPEC 2.6) ----------------------------------- */
  --e-1: 0 1px 2px rgb(var(--shade) / .06), 0 8px 24px -10px rgb(var(--shade) / .14);
  --e-2: 0 1px 2px rgb(var(--shade) / .10), 0 10px 28px -8px rgb(var(--shade) / .22), 0 28px 64px -24px rgb(var(--shade) / .28);
  --e-4: 0 2px 4px rgb(var(--shade) / .10), 0 34px 60px -30px rgb(var(--shade) / .55);
  --e-pop: 0 0 0 5px rgb(255 255 255 / .9), 0 30px 50px -26px rgb(var(--shade) / .55), 0 12px 20px -14px rgb(var(--shade) / .35);
  --e-pop-hover: 0 0 0 5px #ffffff, 0 40px 56px -26px rgb(var(--shade) / .65), 0 14px 24px -14px rgb(var(--shade) / .4);
  --e-arch: 0 0 0 6px rgb(255 255 255 / .92), 0 30px 50px -26px rgb(var(--shade) / .55), 0 12px 20px -14px rgb(var(--shade) / .35);
  --e-dark: 0 24px 60px -20px rgb(0 0 0 / .55);
  --cut-shadow: 0 18px 18px rgb(var(--shade) / .28);
  --sprig-shadow: 0 14px 14px rgb(var(--shade) / .22);
  --plate-shadow-dark: 0 10px 24px -14px rgb(0 0 0 / .6);
  --alert-shadow: 0 10px 20px -10px rgb(148 18 33 / .9);
  --title-shadow: 0 2px 12px rgb(20 31 0 / .25);
  --band-top-hl: inset 0 1px 0 rgb(255 255 255 / .25);

  /* --- glass recipes (DESIGN-SPEC 2.7; D raised to .90/.92) ---------------------------------------- */
  --rim-light: linear-gradient(155deg, rgb(255 255 255 / .95), rgb(255 255 255 / .2) 34%, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / .55));
  --rim-dark: linear-gradient(155deg, rgb(221 234 197 / .45), rgb(221 234 197 / 0) 40%, rgb(221 234 197 / 0) 70%, rgb(221 234 197 / .18));
  --ga-bg: linear-gradient(160deg, rgb(255 255 255 / .84), rgb(255 255 255 / .76));
  --ga-border: rgb(255 255 255 / .62);
  --ga-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .22), 0 1px 2px rgb(var(--shade) / .10), 0 10px 28px -8px rgb(var(--shade) / .22), 0 28px 64px -24px rgb(var(--shade) / .28);
  --ga-shadow-hover: inset 0 1px 0 #ffffff, 0 2px 4px rgb(var(--shade) / .10), 0 34px 60px -30px rgb(var(--shade) / .55);
  --ga-solid: rgb(255 255 255 / .94);
  --header-glass-bg: linear-gradient(160deg, rgb(255 255 255 / .88), rgb(255 255 255 / .80));
  --drawer-bg: rgb(255 255 255 / .96);
  --gb-bg: linear-gradient(160deg, rgb(251 253 246 / .72), rgb(244 249 235 / .58));
  --gb-border: rgb(255 255 255 / .78);
  --gb-shadow: inset 0 1px 0 rgb(255 255 255 / .90), 0 0 0 1px rgb(68 102 0 / .08), 0 1px 2px rgb(var(--shade) / .06), 0 8px 24px -10px rgb(var(--shade) / .14), 0 24px 48px -28px rgb(68 102 0 / .22);
  --gb-solid: rgb(250 252 246 / .92);
  --gb-flat: linear-gradient(160deg, rgb(252 253 249 / .94), rgb(248 251 242 / .90));
  --gc1-bg: linear-gradient(160deg, rgb(248 250 242 / .90), rgb(238 244 226 / .86));
  --gc1-border: rgb(148 188 74 / .45);
  --gc1-shadow: inset 0 1px 0 rgb(255 255 255 / .85), 0 1px 2px rgb(var(--shade) / .08), 0 10px 26px -12px rgb(68 102 0 / .30);
  --gc1-shadow-hover: inset 0 1px 0 #ffffff, 0 16px 30px -18px rgb(68 102 0 / .45);
  --gc2-bg: linear-gradient(135deg, rgb(68 102 0 / .90), rgb(49 73 0 / .92));
  --gc2-bg-hover: linear-gradient(135deg, rgb(68 102 0 / .94), rgb(49 73 0 / .96));
  --gc2-border: rgb(189 213 143 / .35);
  --gc2-shadow: inset 0 1px 0 rgb(255 255 255 / .18), inset 0 -1px 0 rgb(0 0 0 / .12), 0 1px 2px rgb(var(--shade) / .20), 0 14px 34px -12px rgb(var(--shade) / .45);
  --gc2-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .2), 0 2px 4px rgb(var(--shade) / .10), 0 34px 60px -30px rgb(var(--shade) / .55);
  --gd-bg: linear-gradient(160deg, rgb(20 31 0 / .90), rgb(35 34 41 / .92));
  --gd-border: rgb(221 234 197 / .14);
  --gd-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 1px 0 rgb(255 255 255 / .04), 0 24px 60px -20px rgb(0 0 0 / .55);

  /* --- component fills ------------------------------------------------------------------------------ */
  --field-bg: radial-gradient(60vw 40vw at 85% 0%, rgb(255 251 233 / .9), rgb(255 251 233 / 0) 70%), linear-gradient(180deg, var(--field-top) 0%, var(--ground) 40%, var(--field-bottom) 100%);
  --progress-bg: linear-gradient(90deg, var(--green-400), var(--green-600));
  --topbar-bg: linear-gradient(100deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0) 42%), var(--green-500);
  --pill-shadow: inset 0 1px 0 #ffffff, 0 6px 16px -8px rgb(var(--shade) / .45);
  --round-btn-shadow: inset 0 1px 0 #ffffff, 0 6px 14px -8px rgb(68 102 0 / .5);
  --c1-btn-bg: linear-gradient(160deg, rgb(248 250 242 / .95), rgb(238 244 226 / .9));
  --btn-primary-bg: linear-gradient(135deg, var(--green-600), var(--green-700));
  --btn-primary-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 10px 24px -10px rgb(68 102 0 / .6);
  --btn-primary-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .2), 0 16px 30px -12px rgb(68 102 0 / .7);
  --btn-alert-shadow: 0 10px 24px -12px rgb(0 0 0 / .6);
  --btn-invert-shadow: 0 10px 24px -12px rgb(0 0 0 / .45);
  --glimmer-light: linear-gradient(100deg, rgb(255 255 255 / 0), rgb(255 255 255 / .45) 50%, rgb(255 255 255 / 0));
  --glimmer-alert: linear-gradient(100deg, rgb(148 18 33 / 0), rgb(148 18 33 / .10) 50%, rgb(148 18 33 / 0));
  --glimmer-green: linear-gradient(100deg, rgb(117 155 42 / 0), rgb(117 155 42 / .22) 50%, rgb(117 155 42 / 0));
  /* icon tiles: #759b2a -> green-600 (a white glyph on the lab's #86ad38 stop was 2.61; this is 3.24-5.30) */
  --icon-tile-bg: linear-gradient(145deg, var(--green-500), var(--green-600));
  --icon-tile-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 18px -8px rgb(68 102 0 / .7);
  --icon-tile-shadow-light: inset 0 1px 0 #ffffff, 0 8px 16px -8px rgb(0 0 0 / .45);
  --stage-bg: radial-gradient(120% 90% at 100% 0%, rgb(255 251 233 / .95), rgb(255 251 233 / 0) 55%), radial-gradient(80% 70% at 0% 100%, rgb(189 213 143 / .55), rgb(189 213 143 / 0) 70%), linear-gradient(160deg, var(--stage-1) 0%, var(--stage-2) 55%, var(--stage-3) 100%);
  --stage-veil: linear-gradient(160deg, rgb(246 250 238 / .85), rgb(246 250 238 / .2));
  --stage-sun: radial-gradient(closest-side, rgb(255 255 255 / .95), rgb(255 251 233 / .5) 45%, rgb(255 251 233 / 0));
  --stage-beams: repeating-linear-gradient(118deg, rgb(255 255 255 / 0) 0 80px, rgb(255 255 255 / .34) 80px 130px, rgb(255 255 255 / 0) 130px 240px);
  --stage-shadow: inset 0 1px 0 #ffffff, 0 30px 80px -50px rgb(68 102 0 / .45);
  --band-stage-bg: radial-gradient(120% 90% at 100% 0%, rgb(255 251 233 / .95), rgb(255 251 233 / 0) 55%), linear-gradient(160deg, var(--stage-1) 0%, var(--stage-2) 60%, var(--stage-3) 100%);
  --band-veil: linear-gradient(160deg, rgb(246 250 238 / .80), rgb(246 250 238 / .35));
  --band-veil-photo: radial-gradient(80% 90% at 0% 100%, rgb(189 213 143 / .45), rgb(189 213 143 / 0) 70%);
  --svc-band-bg: radial-gradient(70% 90% at 50% 0%, rgb(255 251 233 / .9), rgb(255 251 233 / 0) 60%), linear-gradient(180deg, var(--green-100), var(--svc-band-2) 70%, var(--svc-band-3));
  --svc-band-shadow: inset 0 1px 0 #ffffff, inset 0 -1px 0 rgb(68 102 0 / .08);
  --smile-bg: linear-gradient(160deg, rgb(255 255 255 / .9), rgb(255 255 255 / .55));
  --smile-shadow: inset 0 1px 0 #ffffff, 0 22px 36px -18px rgb(var(--shade) / .55);
  --rev-stage-bg: linear-gradient(160deg, rgb(238 244 226 / .9), rgb(223 228 229 / .6));
  --rev-stage-shadow: inset 0 1px 0 rgb(255 255 255 / .8);
  --brand-plate-bg: linear-gradient(160deg, rgb(255 255 255 / .92), rgb(255 255 255 / .84));
  --brand-shadow: inset 0 1px 0 #ffffff, 0 30px 50px -30px rgb(20 31 0 / .6);
  --brand-shadow-hover: inset 0 1px 0 #ffffff, 0 40px 60px -30px rgb(20 31 0 / .7);
  --brand-img-shadow: 0 0 0 4px #ffffff, 0 24px 34px -20px rgb(20 31 0 / .6);
  --brand-img-shadow-hover: 0 0 0 4px #ffffff, 0 36px 44px -22px rgb(20 31 0 / .7);
  --footer-field: radial-gradient(70% 90% at 82% 8%, var(--field-lime-light), rgb(169 201 110 / 0) 70%), linear-gradient(180deg, var(--green-400), var(--field-lime-deep));

  /* --- type: BRAND-SYSTEM section 10 (fonts self-hosted, SIL OFL 1.1) ------------------------------ */
  --ff-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ff-body: "Nunito Sans", "Segoe UI", Arial, Helvetica, sans-serif;
  --fv-display: "SOFT" 100, "WONK" 0; /* Fraunces axes; unknown axes are ignored by Nunito Sans */
  --fs-xs:      clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);
  --fs-sm:      clamp(0.9063rem, 0.883rem + 0.0952vw, 0.9688rem);
  --fs-base:    clamp(1rem, 0.9536rem + 0.1905vw, 1.125rem);
  --fs-lead:    clamp(1.125rem, 1.0554rem + 0.2857vw, 1.3125rem);
  --fs-h4:      clamp(1.1875rem, 1.1179rem + 0.2857vw, 1.375rem);
  --fs-h3:      clamp(1.3125rem, 1.1732rem + 0.5714vw, 1.6875rem);
  --fs-h2:      clamp(1.625rem, 1.3rem + 1.3333vw, 2.5rem);
  --fs-h1:      clamp(2rem, 1.4893rem + 2.0952vw, 3.375rem);
  --fs-display: clamp(2.375rem, 1.4929rem + 3.619vw, 4.75rem);
  --fs-tag:     clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  --lh-body: 1.65; --lh-lead: 1.55; --lh-h4: 1.3; --lh-h3: 1.25; --lh-h2: 1.15; --lh-h1: 1.08; --lh-display: 1.02;
  --ls-display: -0.02em; --ls-h1: -0.015em; --ls-h2: -0.01em;
  /* VIA-01 (must-fix #12, "about 66 characters per line"): 1ch is the width of "0", about 1.3 average Nunito Sans
     characters, so the former 66ch set 77-94 characters per line (median 85-89). 51ch sets the median full line at
     about 66 characters. A recorded change to the spec value `--measure: 66ch`. */
  --measure: 51ch;
  --measure-narrow: 52ch;

  /* --- space, layout, radii (DESIGN-SPEC 2.4, 2.5) ------------------------------------------------- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: clamp(40px, 28px + 3vw, 64px);
  --s-8: clamp(56px, 36px + 5vw, 104px);
  --s-9: clamp(72px, 40px + 8vw, 150px);
  --gutter: clamp(16px, 2.5vw, 32px);
  --wrap: 1240px; --wrap-wide: 1400px; --aside: 320px;
  --r-sm: 14px; --r-md: 22px; --r-lg: clamp(22px, 2.2vw, 32px); --r-xl: clamp(28px, 3.2vw, 48px); --r-pill: 999px;
  --r-arch: 999px 999px var(--r-lg) var(--r-lg);

  /* --- motion (DESIGN-SPEC 2.9) -------------------------------------------------------------------- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --t-fast: .3s; --t-base: .45s; --t-slow: .8s; --t-reveal: .9s;
  --stagger: 90ms;
  /* accordions open and close over this (operator 2026-09-30: "apply the same slower accordions to the glass site
     too", after the neoclassical theme): the panel height, the answer's fade and the plus/minus morph. Was .5s (fade,
     icon), and the height did not animate at all */
  --t-fold: 1s;
  /* ...with the neoclassical theme's curve (its --n-ease), so both themes fold alike: on glass's own --ease-out
     (.16, 1, .3, 1) the same 1s looked done by about 0.7s */
  --ease-fold: cubic-bezier(.22, .61, .36, 1);
}

/* set by src/build.mjs: tex-frosted-glass with its alpha baked to 6% (AI-generated, labelled in the file) */
:root { --tex-frost: url("../img/generated/tex-frosted-glass.97de41857b.webp"); }