/* ============================================================
   CE Canon — Design Tokens
   v0.1 · 2026-04-25
   Single source of truth. Import this on every CE page:
     <link rel="stylesheet" href="/canon/system/tokens.css">
   Spec page: /canon/system/
   ============================================================ */

:root {
  /* ── COLOR ─────────────────────────────────────────────────
     CE is monochrome by default. Red is an accent — never a fill.
     ──────────────────────────────────────────────────────── */
  --ce-red:        #cc0000;   /* accent only — labels, rule, hover */
  --ce-red-soft:   #fdf3f1;   /* tint for callouts */

  --ce-black:      #1a1a1a;   /* headings on light, body on dark */
  --ce-ink:        #2a2a2a;   /* body on light */
  --ce-ink-soft:   #4a4642;   /* secondary body */
  --ce-grey:       #5a5a5a;   /* notes, meta */
  --ce-light:      #999;      /* labels, disabled */
  --ce-border:     #e8e6e1;   /* hairlines */
  --ce-paper:      #faf9f7;   /* secondary surface */
  --ce-bg:         #ffffff;   /* primary surface */

  /* Dark mode surfaces (used selectively, not blanket) */
  --ce-night:      #0e0e0e;
  --ce-night-up:   #161616;

  /* Aliases used in CE-Story / Approach hero pattern */
  --red:           var(--ce-red);
  --black:         var(--ce-black);
  --ink:           var(--ce-ink);
  --grey:          var(--ce-grey);
  --light:         var(--ce-light);
  --border:        var(--ce-border);
  --paper:         var(--ce-paper);
  --bg:            var(--ce-bg);

  /* ── TYPE FAMILIES ─────────────────────────────────────────
     Canon = TWO families. Source of truth: /canon/03-type/.
     Larken — mark, headlines, ledes (Light 300; italic = saved gesture).
     Inter  — body, captions, labels, code.
     No mono. --ce-mono is retired and aliased to the sans so legacy
     pages keep resolving but render the canon way (Inter).
     ──────────────────────────────────────────────────────── */
  --ce-serif:  'larken', 'Larken', Georgia, serif;
  --ce-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ce-mono:   var(--ce-sans);   /* retired — canon has no mono */

  --serif:  var(--ce-serif);
  --sans:   var(--ce-sans);
  --mono:   var(--ce-sans);      /* legacy alias → sans */
  --larken: var(--ce-serif);     /* legacy alias */

  /* ── TYPE SCALE ────────────────────────────────────────────
     Five sizes, 1.25 ratio. Resist the sixth. Per /canon/03-type/.
       Display + Section — Larken.   Lede — Larken italic.
       Body + Meta — Inter.
     Legacy size tokens (h2/h3/lead/small/label) fold into the five
     so existing pages snap to the canon scale.
     ──────────────────────────────────────────────────────── */
  --t-display:   clamp(40px, 5.4vw, 72px);   /* Larken — the phrase */
  --t-section:   clamp(30px, 3.8vw, 52px);   /* Larken — where it lives */
  --t-lede:      19px;                        /* Larken italic — saved gesture */
  --t-body:      15px;                        /* Inter — reading voice */
  --t-meta:      12px;                        /* Inter — captions, labels */

  /* legacy aliases → canon five */
  --t-lead:      var(--t-lede);
  --t-h2:        var(--t-section);
  --t-h3:        var(--t-lede);
  --t-small:     var(--t-meta);
  --t-label:     var(--t-meta);

  /* Letter-spacing presets */
  --ls-tight:    -0.025em;   /* serif display */
  --ls-snug:     -0.02em;    /* serif section */
  --ls-normal:   0;
  --ls-wide:     0.06em;
  --ls-label:    0.14em;     /* mono labels */
  --ls-eyebrow:  0.18em;     /* mono eyebrows */

  /* Line-heights */
  --lh-display:  1.04;
  --lh-section:  1.12;
  --lh-tight:    1.2;
  --lh-body:     1.7;
  --lh-prose:    1.85;

  /* ── SPACING SCALE ─────────────────────────────────────────
     8px base. Use these instead of arbitrary px.
     ──────────────────────────────────────────────────────── */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;
  --s-11:  192px;
  --s-12:  256px;

  /* Vertical section rhythm */
  --section-y:   clamp(64px, 8vw, 128px);

  /* ── LAYOUT ───────────────────────────────────────────────  */
  --container:   1240px;       /* dense — inventory, DS, dashboards */
  --measure:     720px;        /* prose column */
  --gutter:      clamp(20px, 4vw, 40px);

  /* ── BORDERS / RADII ──────────────────────────────────────  */
  --hair:        1px solid var(--ce-border);
  --rule:        2px solid var(--ce-black);
  --r-1:         2px;
  --r-2:         4px;
  --r-pill:      999px;

  /* ── BREAKPOINTS (for reference; use in @media) ──────────── */
  --bp-s:        540px;
  --bp-m:        720px;
  --bp-l:        960px;        /* mobile→desktop split for CE pages */
  --bp-xl:       1240px;

  /* ── MOTION ─────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast:      120ms;
  --t-base:      200ms;
  --t-slow:      400ms;
}

/* ============================================================
   GLOBAL RESET (opt-in — import only on canon-driven pages)
   ============================================================ */
.ce-canon * { box-sizing: border-box; }
.ce-canon { margin: 0; }

/* ============================================================
   BASE TYPE — applied to .ce-canon scope
   Outside .ce-canon, pages keep their own base.
   ============================================================ */
.ce-canon body,
body.ce-canon {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Orphan/widow control. Manual <br> wins over balance. */
.ce-canon h1, .ce-canon h2 { text-wrap: pretty; }
.ce-canon h3, .ce-canon h4, .ce-canon p { text-wrap: pretty; }
.ce-canon .lede, .ce-canon blockquote { text-wrap: balance; }

/* ============================================================
   PRIMITIVES — copy these classes anywhere
   ============================================================ */

/* Eyebrow — mono uppercase, optional rule before */
.ce-eyebrow {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.ce-eyebrow--rule::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

/* Label — quieter than eyebrow, used inside cards */
.ce-label {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--light);
  font-weight: 500;
}

/* Pill — status / type tag */
.ce-pill {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  background: #fff;
}
.ce-pill--accent { color: var(--red); border-color: #f0c9c4; background: var(--ce-red-soft); }
.ce-pill--mute   { opacity: 0.55; }

/* Lede — first paragraph, larger, italic-friendly */
.ce-lede {
  font-family: var(--serif);
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink);
  font-style: italic;
}

/* Display & Section heads */
.ce-display {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-weight: 400;
  color: var(--black);
}
.ce-display em { font-style: italic; color: var(--grey); }

.ce-section-h {
  font-family: var(--serif);
  font-size: var(--t-section);
  line-height: var(--lh-section);
  letter-spacing: var(--ls-snug);
  font-weight: 400;
  color: var(--black);
}
.ce-section-h em { font-style: italic; color: var(--grey); }

/* Container & section */
.ce-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.ce-section   { padding: var(--section-y) 0; border-bottom: var(--hair); }
.ce-section:last-child { border-bottom: 0; }

/* Section head pattern: eyebrow + h2 + count */
.ce-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; border-bottom: var(--rule); padding-bottom: 10px; margin-bottom: 18px;
}