/**
 * foundation.css — the scales (SLICE C2 / UX Law Book Layer 1)
 * ============================================================================
 * The skin-INDEPENDENT rules: spacing, type, weight, radius, sizing, elevation,
 * motion. These do not change per palette — only color does (skins.css). Every
 * component in dialed-ui.css references THESE tokens; nothing hardcodes a px.
 *
 * This is what makes the UX Law Book enforceable: "a rule with no token is not
 * enforced." U2–U8 live here as real custom properties. Change a value here,
 * the whole platform moves — the coherence win.
 *
 * Load order per page:  foundation.css → skins.css → dialed-ui.css → page.
 * ============================================================================ */
:root{
  /* ═══ LIQUID GLASS — THE ONE MATERIAL (Elle 2026-08-29: "nothing bespoke,
     one source of design truth"). Every glass surface consumes THESE tokens;
     hand-rolling blur/edge/highlight values is a LAW 36 violation. The white
     rim is the material's specular edge — glass catching light — and stays
     even where iOS forces an opaque ground (the ground changes, the material
     identity does not). Modal sheets keep their separately-ratified 44px
     recipe (dialed-modal.js, Elle 2026-08-15). ═══ */
  --glass-bg: color-mix(in oklab, var(--surface), transparent 30%);
  --glass-blur: blur(22px) saturate(165%);
  --glass-edge: color-mix(in oklab, #fff, transparent 45%);
  --glass-highlight: inset 0 1px 0 0 rgba(255, 255, 255, 0.65);

  /* U3 · SPACING — 4-based. The ONLY spacing values. Off-scale = violation. */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* U2 · TYPE SCALE — whole pixels only (no half-pixels; 12.5 retired). */
  /* LAW D9.6 / LAW 32.7 (2026-09-05): metadata never renders under 11px. The
     two smallest steps of the ladder sat below the floor (8px, 10px) and every
     folder inherited them through 76 book rules; the floor is the token now. */
  --fs-3xs:11px; --fs-2xs:11px; --fs-xs:11px; --fs-sm:12px; --fs-base:14px; --fs-md:15px;
  --fs-lg:17px;  --fs-xl:19px; --fs-2xl:22px; --fs-3xl:30px; --fs-display:36px;
  /* --fs-input is a FLOOR, not a style: iOS Safari zooms the page when a
     focused field computes below 16px (LAW 45/48). Every input/textarea/
     select/contenteditable uses this token; 39 sheets were hand-writing
     16px to satisfy the law - the book owns it now. */
  --fs-input:16px;

  /* PAPER — a surface that stays white in EVERY skin, because it is not our
     surface to skin. Three cases, all real: a received email is sender-authored
     HTML written for a white ground (skinning it breaks the sender's own
     styling); a signature preview must match exactly what will send (LAW 21);
     and a brand LOGO needs paper behind it or the mark reads wrong. Pearl White,
     never raw #FFFFFF (LAW 3). Five sheets were each pinning these by hand and
     declaring themselves an exception - the book owns the concept now, so the
     REASON travels with the name. Tone-invariant by contract, which is why it
     lives here and not in skins.css. (2026-08-18) */
  --paper:#FDFCFA;
  --paper-ink:#1C1C1E;
  /* the lighter ink on paper: fallback initials, captions inside a plate */
  --paper-ink-2:#4D4258;

  /* Decorative GLYPH sizes: empty-state marks and format badges, which are
     illustration rather than type, so they sit above the reading scale. */
  --fs-glyph-sm:24px; --fs-glyph-md:26px; --fs-glyph-lg:48px;

  /* U2 · WEIGHTS + tracking + leading */
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-black:800;
  --tr-tight:-0.03em; --tr-snug:-0.01em; --tr-label:0.14em;
  --lh-tight:1.1; --lh-snug:1.25; --lh-body:1.5;

  /* U6 · RADIUS */
  /* --r-xs: the small-control step (checkboxes, swatches, mini badges) -
     47 estate uses of 3-4px proved the scale was missing its bottom rung. */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:24px; --r-3xl:30px; --r-pill:999px;

  /* U4 · SIZING — control heights (44 = tap floor, LAW 32) + icon sizes */
  --h-sm:32px; --h-md:40px; --h-lg:44px;
  --ic-sm:15px; --ic-md:17px; --ic-lg:19px; --ic-xl:21px;

  /* U8 · MOTION */
  --t-fast:.15s; --t-base:.25s; --t-slow:.45s;
  --ease:cubic-bezier(.22,1,.36,1);

  /* U9 · FONT FAMILIES (color-independent) */
  --font-display:'Satoshi','Inter',-apple-system,sans-serif;
  --font-body:'Inter',-apple-system,sans-serif;
  --font-accent:'Instrument Serif',Georgia,serif;

  /* U5 · rail + tab-bar geometry */
  --dl-rail-w:76px; --dl-rail-open:256px;
  /* --tabbar-h is CLEARANCE FOR A BAR THAT EXISTS, so it is 0 where the bar does
     not. It was a flat 74px at every width, while .dl-tabbar only renders at
     <=900px - so every page on DESKTOP reserved 74px + sp-4 + safe-area of
     bottom gutter for a bar that was never painted. Measured on email at 960px:
     an 82px dead band under the panes, which is Elle's "whats with all the
     wasted space" (2026-08-18). The query below MIRRORS the shell's own
     condition, deliberately as a union, so clearance exists wherever a bar
     could appear and the two can never disagree. */
  --tabbar-h:0px;
}
@media (max-width:900px), ((hover:none) and (pointer:coarse) and (max-width:1023px)) {
  :root{ --tabbar-h:74px; }
  /* inside the shell's content frame the viewport already ENDS at the tab bar
     (LAW 46.7b): a framed page's fixed bars sit at bottom:0, so its tab-bar
     clearance is zero. The dock bar floated one band above the tab bar on
     Elle's phone, 2026-09-05, because a framed page still paid the 74px. */
  :root.dl-framed{ --tabbar-h:0px; --shell-handle:38px; }
  /* --shell-handle: the shell's nav grabber is a transparent 38px strip over the
     frame's bottom band (app-shell-tabbar.js); a framed page's fixed bottom bar
     reserves it inside its own padding, Safari-toolbar style, so its verbs sit
     above the grabber and stay tappable (Elle's phone 2026-09-05: the Payout
     dock's Reset opened the nav sheet). */
}
/* U7 · ELEVATION — shadow scale (depends on skin ink; light default, dark below) */
:root[data-tone="light"]{
  --el-1:0 24px 60px -20px rgba(45,36,56,.22), 0 1px 0 0 rgba(255,255,255,.35) inset;
  --el-2:0 30px 70px -22px rgba(45,36,56,.28), 0 1px 0 0 rgba(255,255,255,.5) inset;
  --el-3:0 30px 70px -14px rgba(45,36,56,.34);
}
:root[data-tone="dark"]{
  --el-1:0 24px 60px -20px rgba(0,0,0,.5), 0 1px 0 0 rgba(255,255,255,.12) inset;
  --el-2:0 30px 70px -22px rgba(0,0,0,.6), 0 1px 0 0 rgba(255,255,255,.14) inset;
  --el-3:0 30px 70px -14px rgba(0,0,0,.72);
}

/* IDENTITY RAMP — deterministic per-sender colour, frozen on purpose.
   Lives in foundation, not skins, because it must NOT follow the tone: the same
   sender is the same colour in every palette, which is the whole point of a
   deterministic identity chip.
   A frozen ground needs a frozen ink. The email avatars previously used
   var(--text-on-dark), a SKIN-derived ink, over these frozen grounds — so the
   ink moved with the palette while the ground could not, and the pair went
   unreadable: 2 of 10 stops cleared AA on the light skins, 0 of 10 on the dark
   ones. Every stop here is darkened until #FDFCFA clears 4.5:1 with headroom
   (worst case 4.80:1), and --on-av is fixed to that ink. */
:root{
  --av-0:linear-gradient(135deg,#75689F,#5B4E8C);
  --av-1:linear-gradient(135deg,#306363,#457979);
  --av-2:linear-gradient(135deg,#886A4A,#76583A);
  --av-3:linear-gradient(135deg,#7D6988,#69537D);
  --av-4:linear-gradient(135deg,#A35B5B,#8B4747);
  --av-5:linear-gradient(135deg,#597093,#42597C);
  --av-6:linear-gradient(135deg,#7E678A,#675178);
  --av-7:linear-gradient(135deg,#816C55,#6C5740);
  --av-8:linear-gradient(135deg,#61746A,#4E6157);
  --av-9:linear-gradient(135deg,#856972,#72545E);
  --on-av:#FDFCFA;
}