/* ============================================================
   HOME ED COLLECTIVE — 01 / tokens.css
   The only file allowed to declare a raw value.
   ------------------------------------------------------------
   The Collective is a content property inside Anna Kemp's
   personal authority brand: same two typefaces, same palette,
   same restraint about claims — louder, tighter, built to
   survive a feed.

   Two token groups live here:
     --hec-*        shared, safe anywhere (site + thumbnails)
     --hec-field-*  EXPORT-STRENGTH fields. Legal in a thumbnail
                    or a thumbnail rendered on the site. Never a
                    page background, never a button, never body
                    text. On the site proper, keep using the
                    website system's tint values.
   ============================================================ */

:root {

  /* ---------- 1. Type — unchanged from the website layer ---------- */
  --hec-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --hec-font-ui:      'Karla', system-ui, -apple-system, sans-serif;

  /* Hook weight. Karla 800 is the heaviest weight in the family
     Anna already uses — no new typeface enters the system. */
  --hec-hook-weight:   800;
  --hec-hook-tracking: -.02em;
  --hec-hook-leading:  .96;

  /* ---------- 2. Core palette (shared with the website) ---------- */
  --hec-ink:        #16232A;
  --hec-teal:       #2E6E6A;
  --hec-teal-hover: #245653;
  --hec-mint-soft:  #9FC0BA;   /* type on ink; never on paper */
  --hec-paper:      #F7F4EF;
  --hec-page:       #F2EFEA;
  --hec-surface:    #FFFFFF;
  --hec-sand:       #EAE1D4;

  --hec-text-primary:   #16232A;
  --hec-text-secondary: #3D4E55;
  --hec-text-muted:     #5A6B72;
  /* DEFECT FIXED 2026-08-25 — #617076 measures 4.48:1 on --hec-page,
     just under AA for the 12px uppercase meta and eyebrow that use it.
     #606F75 is one step darker and measures 4.55:1. */
  --hec-text-quiet:     #606F75;
  --hec-text-on-dark:   rgba(244, 240, 232, .72);
  --hec-text-on-sand:   #5A5041;

  --hec-border:        rgba(22, 35, 42, .12);
  --hec-border-strong: rgba(22, 35, 42, .28);
  --hec-rule:          #16232A;
  --hec-focus:         #2E6E6A;

  /* ---------- 3. Thumbnail fields — EXPORT STRENGTH ----------
     Seven fields, one per thumbnail. Mustard, coral and deep
     sand are strengthened relative to the website tints because
     a 12%-opacity web tint disappears in a compressed feed.
     Each field carries its own legal type colour — do not mix. */
  --hec-field-ink:         #16232A;  --hec-on-ink:      #F7F4EF;
  --hec-field-teal:        #2E6E6A;  --hec-on-teal:     #F7F4EF;
  --hec-field-sand:        #EDE6DB;  --hec-on-sand:     #16232A;
  --hec-field-mint:        #C9E6DA;  --hec-on-mint:     #16232A;
  --hec-field-mustard:     #E9CD98;  --hec-on-mustard:  #16232A;
  --hec-field-coral:       #F2BCA8;  --hec-on-coral:    #16232A;
  --hec-field-paper:       #F7F4EF;  --hec-on-paper:    #16232A;

  /* Accent — ONE per thumbnail, never three. */
  --hec-accent-mint: #C9E6DA;
  --hec-accent-teal: #2E6E6A;
  --hec-accent-sand: #EAE1D4;

  /* ---------- 4. Thumbnail geometry (container-query units) ----------
     Every thumbnail is a container; all internal sizing is in cqw
     so one set of numbers holds at 3840px and at 160px. */
  --hec-safe:          4%;      /* nothing essential inside this margin */
  --hec-mark-size:     7.38cqw;
  --hec-mark-type:     2.59cqw;
  --hec-mark-inset:    4.2%;
  --hec-hook-xl:       8.9cqw;  /* one-line hook, 2–3 words */
  --hec-hook-lg:       8.8cqw;  /* two-line hook — the default */
  --hec-hook-md:       7cqw;    /* three-line, or hook beside a portrait */
  --hec-hook-sm:       6.25cqw; /* hook over a gradient plate */
  --hec-qualifier:     4cqw;    /* Newsreader italic sub-line */
  --hec-label:         2.4cqw;  /* uppercase series / guest label */
  --hec-label-sm:      2.1cqw;

  /* ---------- 5. Motifs ----------
     The rounded diamond is the channel mark and the only soft
     shape in the system besides the pill. */
  --hec-radius-diamond: 34%;
  --hec-radius-pill:    100px;
  --hec-radius-none:    0;

  /* Torn-edge clips — imperfection, applied to highlight plates
     and cut panels. Never to a photograph of a person. */
  --hec-cut:   polygon(0.5% 7%, 99.4% 1.5%, 99.2% 93%, 0.8% 98.5%);
  --hec-cut-b: polygon(0.8% 3%, 99.5% 8%, 98.9% 97%, 0.4% 92%);

  /* ---------- 6. Page-side space and layout ---------- */
  --hec-space-1: 4px;   --hec-space-2: 8px;   --hec-space-3: 12px;
  --hec-space-4: 16px;  --hec-space-5: 24px;  --hec-space-6: 32px;
  --hec-space-7: 48px;  --hec-space-8: 64px;  --hec-space-9: 80px;

  --hec-content-max: 1240px;
  --hec-gutter:      clamp(20px, 4vw, 48px);
  --hec-section-y:   clamp(52px, 6.5vw, 96px);

  --hec-type-h1:    clamp(2.3rem, 4.6vw, 3.6rem);
  --hec-type-h2:    clamp(1.7rem, 3vw, 2.3rem);
  --hec-type-h3:    20px;
  --hec-type-lead:  17px;
  --hec-type-body:  15.5px;
  --hec-type-sm:    14.5px;
  --hec-type-label: 12px;

  --hec-tracking-label: .18em;
  --hec-leading-body:   1.7;

  --hec-shadow-card: 0 1px 3px rgba(22, 35, 42, .06);

  /* ---------- 7. Motion — one gesture ---------- */
  --hec-hover-duration: 220ms;
  --hec-hover-ease:     cubic-bezier(.2, .7, .2, 1);
}

/* ============================================================
   Breakpoints — four, matching the website layer.
   mobile 320–599 · tablet 600–899 · desktop 900–1279 · wide 1280+
   ============================================================ */