/* ============================================================
   CALIBER · DAYLIGHT · DESIGN TOKENS
   Canonical implementable token specification (Checkpoint 3).
   Rule statuses and laws live in ../design-system.md — this
   file and that document move together.
   Route F2 + developed system approved by the founder 2026-07-29.
   One sky, one orange, one white subject. Hairlines and a soft
   shadow carry all containment; color never decorates chrome.
   Pages load fonts via <link>; this file assumes:
     Fraunces  (variable: opsz 9..144, wght 400..700, SOFT, WONK)
     Inter     (400/500/600/700)
     IBM Plex Mono (400/600)
   ============================================================ */

:root {
  /* ---------- color · grounds ----------
     Only three grounds exist: gull (white), cloud (panel gray),
     and sky (the marketing field). Ink is a ground only for the
     doc bar and footer. Never cream, never gradients. */
  --color-gull:  #ffffff;
  --color-cloud: #f4f6fb;
  --color-sky:   #1a5cf0;  /* marketing field · white text 5.5:1 */
  --color-ink:   #12141c;

  /* ---------- color · text on light grounds ---------- */
  --color-text:       #12141c;  /* ink · 18.4:1 on gull */
  --color-text-soft:  #3e4354;  /* running text · 9.8:1 */
  --color-text-muted: #666c7e;  /* captions, plates · 5.2:1 (4.8:1 on cloud) */

  /* ---------- color · text on sky ---------- */
  --color-on-sky:       #ffffff; /* 5.5:1 */
  --color-on-sky-muted: #e8eefe; /* ledes, notes · 4.7:1 */

  /* ---------- color · structure ----------
     Perch is the ONLY orange and it is structure + identity:
     the ledge, the payoff underline, the section dash, the
     wordmark square. Never text, never a control fill, never
     a border or stripe on a card. */
  --color-perch: #f26a0d;  /* ink on perch 5.9:1 (large/graphic only) */

  /* ---------- color · working ---------- */
  --color-line:       #e3e6ee;  /* the 1px hairline */
  --color-focus:      #1a5cf0;  /* one focus: cobalt bar + wash */
  --color-focus-deep: #1148cf;  /* pressed/hover on cobalt elements */
  --color-focus-wash: #eef3ff;
  --color-good:       #0e7c4a;  /* passing checks ONLY · 5.2:1 on gull */
  /* There is deliberately no danger color: stops and failed
     readings speak in ink + weight + bracket words. */

  /* ---------- typography · families ----------
     Fraunces (SOFT 100, WONK 0) is the thick brand voice:
     headlines, verdict bands, the wordmark. Weight 640–700,
     never below 640, never in running text, never product UI.
     Inter is everything that reads. Plex Mono is every fact. */
  --font-display: "Fraunces", Georgia, serif;
  --font-text: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* ---------- typography · marketing scale ---------- */
  --type-hero-size: clamp(2.5rem, 4.9vw, 4.05rem);
  --type-hero-weight: 680;
  --type-hero-leading: 1.06;
  --type-hero-tracking: -0.01em;

  --type-head-size: clamp(1.8rem, 2.9vw, 2.4rem); /* section h2 */
  --type-head-weight: 640;
  --type-head-leading: 1.08;
  --type-head-tracking: -0.008em;

  --type-title-size: 1.32rem;   /* card/verdict titles · Fraunces 640 */
  --type-lede-size: 1.13rem;    /* Inter 400 · lh 1.6 */
  --type-body-size: 1rem;       /* Inter 400/500 · lh 1.6 */
  --type-note-size: 0.92rem;    /* Inter 400 · board text */
  --type-caption-size: 0.72rem; /* mono · plates, provenance */
  --type-eyebrow-size: 0.63rem; /* mono caps · ls 0.07em */
  --type-eyebrow-tracking: 0.07em;

  /* ---------- typography · product scale (working density) ----------
     Product UI is Inter + mono only. The serif never appears. */
  --type-ui-size: 0.875rem;      /* 14px · primary UI text */
  --type-ui-dense-size: 0.8125rem; /* 13px · rows, streams */
  --type-ui-fact-size: 0.75rem;  /* 12px · mono timestamps, IDs */
  --type-ui-micro-size: 0.6875rem; /* 11px · mono states, plates */

  /* ---------- spacing · 4px base ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* ---------- layout ---------- */
  --shell-max: 1200px;
  --shell-gutter: 2.5rem;            /* 1.25rem under 900px */
  --section-gap: clamp(3.4rem, 6vw, 5.2rem);
  --prose-max: 72ch;
  --lede-max: 48ch;

  /* ---------- geometry ----------
     Cards are hairline + shadow only. No colored borders,
     no top-stripes, no 2px+ outlines. */
  --radius-card: 10px;
  --radius-chip: 7px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--color-line);
  --ledge-h: 38px;          /* hero ledge */
  --ledge-h-thin: 14px;     /* section-divider ledge, if used */
  --focus-bar: inset 3px 0 0 var(--color-focus);

  /* ---------- elevation ----------
     One soft shadow, low and real. Lift is hover-only. */
  --shadow-soft: 0 1px 2px rgb(18 20 28 / 5%), 0 18px 44px rgb(18 20 28 / 10%);
  --shadow-lift: 0 10px 26px rgb(8 20 60 / 42%);
  --shadow-rest: 0 6px 18px rgb(8 20 60 / 35%);   /* gull CTA on sky */
  --shadow-ink:  0 4px 14px rgb(18 20 28 / 22%);  /* ink CTA on light */

  /* ---------- z-layers ---------- */
  --z-base: 0;
  --z-card: 1;
  --z-perched: 2;   /* fragment crossing a field boundary */
  --z-sticky: 10;   /* nav */
  --z-overlay: 100;

  /* ---------- motion ----------
     Three named moves; nothing else animates.
       alight    · entrance: settle 8px down onto place · 260ms
       underline · the perch rule draws in · 300ms
       verdict   · state pills swap in a single frame · 0ms
     Micro-interactions (hover lift) use --motion-micro. */
  --motion-micro: 160ms;
  --motion-alight: 260ms;
  --motion-underline: 300ms;
  --ease-settle: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Reduced motion: everything has already landed. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro: 0ms;
    --motion-alight: 0ms;
    --motion-underline: 0ms;
  }
}

/* ---------- canonical component seeds ---------- */

/* CTAs: the subject, never the structure. Orange never fills a control. */
.btn-gull { /* on sky fields */
  font-family: var(--font-text); font-weight: 700; font-size: 1rem;
  color: var(--color-ink); background: var(--color-gull);
  border: none; border-radius: var(--radius-pill);
  padding: 0.85rem 1.65rem; cursor: pointer;
  box-shadow: var(--shadow-rest);
  transition: transform var(--motion-micro) var(--ease-settle),
              box-shadow var(--motion-micro) var(--ease-settle);
}
.btn-gull:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }

.btn-ink { /* on light grounds */
  font-family: var(--font-text); font-weight: 700; font-size: 1rem;
  color: var(--color-gull); background: var(--color-ink);
  border: none; border-radius: var(--radius-pill);
  padding: 0.85rem 1.65rem; cursor: pointer;
  box-shadow: var(--shadow-ink);
  transition: transform var(--motion-micro) var(--ease-settle),
              box-shadow var(--motion-micro) var(--ease-settle);
}
.btn-ink:hover { transform: translateY(-1px); }

.btn-quiet { /* secondary, on sky */
  font-family: var(--font-text); font-weight: 700; font-size: 0.9rem;
  color: var(--color-on-sky); background: transparent;
  border: 1.5px solid rgb(255 255 255 / 65%); border-radius: var(--radius-pill);
  padding: 0.5rem 1.15rem; cursor: pointer;
}
.btn-quiet:hover { border-color: var(--color-on-sky); }

/* The card: hairline + soft shadow. Nothing else. */
.card {
  background: var(--color-gull);
  border: var(--hairline);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

/* The plate: provenance row on every product fragment. */
.plate {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1.15rem; border-bottom: var(--hairline);
  font-family: var(--font-mono); font-size: 0.66rem;
  letter-spacing: 0.04em; color: var(--color-text-muted);
  background: var(--color-cloud);
}

/* The focus row: one per surface. */
.row-focus { background: var(--color-focus-wash); box-shadow: var(--focus-bar); }