/* Mesh design tokens: live sky, glass, ink.
   Owner order 2026-10-07: Mesh looks and moves like Hark (palette, glass, serif wordmark, black capsules).
   Source of values: MESH-SPEC.md sections 1 to 3. Fonts are self-hosted (CSP font-src 'self'):
   Inter for UI and reading, Newsreader for the wordmark and display moments. Both SIL OFL. */

@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-latin-var.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(/assets/fonts/newsreader-italic-latin-var.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap}

:root{
  color-scheme:light;

  /* Ink and neutrals. */
  --ink:#1D1D1F;           /* primary text, black capsules, selected nav */
  --ink-on:#F9F9FA;        /* text on ink */
  --ink-2:#55565C;         /* secondary text on glass, 6.4:1 on --neutral-light */
  --ink-3:#6A6B72;         /* tertiary: captions, dates, 4.9:1 on --neutral-light */
  --gray-900:#2A2B34;
  --gray-500:#7B8499;      /* icons on glass */
  --gray-400:#8994AA;
  --gray-300:#B1BCD2;      /* disabled */
  --neutral-light:#F3F5FA; /* opaque fallback surface (reduced transparency) */
  --white:#FFFFFF;
  --brand-blue:#2E4FFF;    /* links, focus ring, selection: sparingly */
  --periwinkle:#A6B4FA;    /* soft highlight, progress tracks */
  --red:#DF4F41;           /* destructive */
  --alert:#FF4D00;         /* errors */

  /* Surface aliases kept so every page stylesheet reads the same names. */
  --wall:#F3F5FA;
  --wall-deep:#E6EBF4;
  --card:#FFFFFF;
  --shelf:#F3F5FA;
  --rule:#DCE1EC;          /* hairline on white */
  --rule-strong:#B1BCD2;   /* form borders */
  --tape-black:#1D1D1F;    /* black capsule */
  --tape-white:#FFFFFF;    /* white chip */
  --on-tape-black:#F9F9FA;
  --on-tape-white:#1D1D1F;
  --select:#2E4FFF;
  --on-select:#FFFFFF;

  /* Glass: every fill sits over the sky. */
  --glass-card:rgba(255,255,255,.48);
  --glass-card-night:rgba(255,255,255,.64);
  --glass-sheet:rgba(255,255,255,.72);
  --glass-control:rgba(255,255,255,.26);
  --glass-input:rgba(255,255,255,.72);
  --glass-stroke:rgba(255,255,255,.55);
  --glass-blur:28px;
  --hairline-glass:rgba(255,255,255,.55);
  --hairline-white:rgba(29,29,31,.07);
  --pill-frosted:rgba(29,29,31,.06);

  /* Sky fallback (midday). sky.js rewrites these from the local hour. */
  --sky-top:#325984;
  --sky-mid:#8AB7E1;
  --sky-bot:#A3B1BA;
  --on-sky:#1D1D1F;
  --on-sky-2:rgba(29,29,31,.68);

  /* Module and spacing. */
  --u:4px;
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;
  --gutter:clamp(16px,4vw,48px);
  --measure:66ch;
  --wrap:1248px;
  --wrap-narrow:816px;
  --tap-min:44px;
  --nav-h:76px;

  /* Families. */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-text:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Type scale (rem at 16px root). */
  --t-2xs:.75rem;
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-md:1.0625rem;
  --t-body:1.0625rem;
  --t-body-mobile:1.0625rem;
  --t-lg:1.25rem;
  --t-xl:1.75rem;
  --t-2xl:clamp(2rem,1.5rem + 1.8vw,2.5rem);
  --t-3xl:clamp(2.25rem,1.6rem + 2.8vw,3.5rem);
  --t-4xl:clamp(2.75rem,1.7rem + 4.4vw,5.25rem);
  --lh-tight:1.05;
  --lh-snug:1.2;
  --lh-ui:20px;
  --lh-ui-lg:24px;
  --lh-body:26px;
  --lh-lede:30px;
  --track-caps:.06em;

  /* Depth: soft, cool, short. */
  --lift-1:0 4px 12px 0 rgba(20,40,70,.06);
  --lift-2:0 8px 24px 0 rgba(20,40,70,.08);
  --lift-3:0 16px 48px 0 rgba(20,40,70,.12);
  --shelf-cast:0 8px 24px 0 rgba(20,40,70,.08);
  --r-card:28px;
  --r-field:16px;
  --r-bubble:22px;
  --r-chip:12px;
  --r-cta:14px;
  --r-pill:999px;

  /* Focus: brand blue ring with a white gap, readable on sky, glass and ink. */
  --focus-w:2px;
  --focus-gap:2px;
  --focus-ring:0 0 0 2px #FFFFFF,0 0 0 4px #2E4FFF;

  /* Motion: springs, not linear. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-press:cubic-bezier(.3,0,.2,1);
  --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --dur-1:120ms;
  --dur-2:240ms;
  --dur-3:480ms;
  --dur-emboss:720ms;

  --z-sky:-1;
  --z-nav:100;
  --z-menu:110;
}