/* ============================================================
   THE TAROK EXPLORATION BOOK :: tokens.css
   Every color, type size, and spacing step used by the block
   library. Values derive from the Alpine Tarok design system
   (suit red, warm ink, edelweiss paper). Nothing outside this
   file hardcodes a color, size, or family.
   Scope: the shared palette, families and print scale live on
   .eg-book AND .eg-web so both the book and the website layer
   resolve them; web-only tokens (px scale, links, focus, form
   controls, breakpoints) are appended in the .eg-web block at
   the foot of this file. Nothing leaks outside those scopes.
   ============================================================ */

/* ---------- Fonts (self-hosted, OFL 1.1) ----------
   The three families are served from assets/design/fonts/ (fetched +
   instanced by scripts/fetch_fonts.py). No Google-Fonts dependency.
   Paths resolve relative to this file (assets/design/tokens.css). */
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-BoldItalic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fonts/CormorantGaramond-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }

.eg-book, .eg-web {

  /* ---------- Ink ---------- */
  --eg-ink:        #14110F;   /* warm near-black, body type, never #000 */
  --eg-ink-2:      #2A2624;   /* captions, secondary text */
  --eg-ink-3:      #6B635D;   /* metadata, page furniture */
  --eg-ink-4:      #A89F98;   /* hairlines, quiet borders */

  /* ---------- Paper ---------- */
  --eg-paper:      #FBF7F1;   /* canonical page background (screen; print uses stock) */
  --eg-paper-2:    #F2EBDF;   /* sticky and box fills */
  --eg-paper-3:    #E6DDCC;   /* table heads, the puzzle tabletop */
  --eg-card-white: #FFFFFF;   /* reserved: playing-card faces, write-in pads */

  /* ---------- Suit red ---------- */
  --eg-red:        #C8102E;
  --eg-red-deep:   #9A0A22;
  --eg-red-wash:   #F8E5E8;

  /* ---------- Alpine accents (rare, callouts only) ---------- */
  --eg-pine:       #2E4A36;
  --eg-gold:       #B58B3A;
  --eg-stone:      #8C8780;
  --eg-stone-deep: #4F4A45;
  --eg-sky:        #A9B4BD;
  --eg-edelweiss:  #F4EFE0;

  /* ---------- Rules ---------- */
  --eg-rule:       #D9CFBE;   /* warm hairline */
  --eg-w-hair:     0.6pt;     /* hairline weight */
  --eg-w-ink:      1.1pt;     /* heavy rule, box frames */
  --eg-w-red:      1.6pt;     /* table header rule, focus marks */
  /* the one card-separation treatment: every playing-card image, every
     background, no per-block exceptions (see NOTES, containment rules) */
  --eg-card-edge:  0.75pt solid #A89F98;

  /* ---------- Families ---------- */
  --eg-display: "Playfair Display", "Times New Roman", serif;
  --eg-serif:   "Cormorant Garamond", "Georgia", serif;
  --eg-sans:    "Inter", "Helvetica Neue", sans-serif;

  /* ---------- Type scale (A5 print, points) ---------- */
  --eg-fs-display: 26pt;  --eg-lh-display: 1.05;   /* cover, title page */
  --eg-fs-chapter: 23pt;  --eg-lh-chapter: 1.08;   /* chapter opener */
  --eg-fs-native:  12pt;                            /* foreign name line */
  --eg-fs-section: 14pt;  --eg-lh-section: 1.15;   /* F3 */
  --eg-fs-sub:     11pt;  --eg-lh-sub:     1.2;    /* F4 */
  --eg-fs-lead:    11.5pt; --eg-lh-lead:   1.4;    /* T2 */
  --eg-fs-body:    10.5pt; --eg-lh-body:   1.42;   /* T1 */
  --eg-fs-small:   9pt;   --eg-lh-small:   1.35;   /* asides, answers, fine print */
  --eg-fs-caption: 7.5pt; --eg-lh-caption: 1.3;    /* Inter labels, eyebrows */
  --eg-fs-tiny:    6.5pt;                           /* seat chips, badges */

  /* ---------- Tracking ---------- */
  --eg-track-caps: 0.14em;   /* small-caps Inter labels */
  --eg-track-wide: 0.2em;    /* eyebrows, running heads */

  /* ---------- Spacing (points) ---------- */
  --eg-sp-1: 2pt;
  --eg-sp-2: 4pt;
  --eg-sp-3: 6pt;
  --eg-sp-4: 9pt;
  --eg-sp-5: 13pt;
  --eg-sp-6: 18pt;
  --eg-sp-7: 27pt;
  --eg-sp-8: 40pt;
  --eg-sp-para: 5pt;         /* between body paragraphs */

  /* ---------- Radii (square by default) ---------- */
  --eg-radius-chip:  1.5pt;  /* tiny chips, id tabs */
  --eg-radius-focus: 5pt;    /* house rule: winner and focus marks are rounded */
  --eg-radius-img:   3pt;    /* card image corners at reduced size */

  /* ---------- Playing-card sizes ---------- */
  --eg-card-w:     44pt;     /* hand, middle */
  --eg-card-w-sm:  34pt;     /* backs, piles */
  --eg-card-w-lg:  58pt;     /* C1, C3 diagrams */
  --eg-ov-hand:   -28pt;     /* hand overlap: 16pt sliver of 44pt */
  --eg-ov-pile:   -29pt;     /* pile overlap: 5pt sliver of 34pt */
  --eg-ov-backs:  -30pt;     /* back stacks: 4pt sliver of 34pt */
  --eg-ov-row:    -14pt;     /* C2 overlapping row, generous sliver */

  /* ---------- Mobile (web layer only, never printed) ---------- */
  --eg-m-card-w:    76px;   /* hand, middle, C2 strip */
  --eg-m-card-w-md: 64px;   /* trick diagram, table groups, pile highlights */
  --eg-m-card-w-sm: 40px;   /* backs, piles */
  --eg-m-ov-hand:  -34px;   /* 42px sliver */
  --eg-m-ov-row:   -36px;   /* C2 strip, 40px sliver */
  --eg-m-ov-pile:  -30px;   /* 10px sliver */
  --eg-m-ov-backs: -36px;   /* 4px sliver */
  --eg-m-scrollbar:  4px;   /* the thin red scroll affordance */

  /* ---------- Sticky motifs (locked 2026-07-18, from the Sticky Lab) ---------- */
  --eg-motif-h:        57pt;  /* wolf, fox, sparrow (square images, width = height) */
  --eg-motif-h-sp:   58.5pt;  /* hedgehog incl. baked 25deg rotation bounding box */
  --eg-motif-align:    0.6;   /* shared vertical: 40% up from the bottom */
  --eg-motif-align-sp: 0.3;   /* hedgehog: 70% up from the bottom */
  --eg-gap-wolf:      4.5pt;  /* horizontal gap, animal to rule */
  --eg-gap-fox:         9pt;
  --eg-gap-sparrow:     9pt;
  --eg-gap-hedgehog: 1.5pt;
  --eg-sticky-gutter:  78pt;  /* uniform indent reserving the animal's place */

  /* ---------- Chapter opener (locked 2026-07-19) ---------- */
  --eg-ghost-size: 92pt;      /* the ghost chapter numeral behind the title */

  /* ---------- Cheat sheets (locked 2026-07-19) ---------- */
  --eg-cs-switch: 6pt;        /* the rules-matrix switch square */

  /* ---------- Web pointers (locked 2026-07-18, from the Web Pointers Lab) ---------- */
  --eg-ptr-card-w:    108pt;  /* the dealt card, deck ratio 0.64 */
  --eg-ptr-radius:      9pt;  /* proportional printed-deck corner */
  --eg-ptr-corner-top:  6pt;
  --eg-ptr-corner-side: 8.5pt;
  --eg-ptr-num:        16pt;  /* Roman numeral */
  --eg-ptr-num-big:    26pt;  /* Arabic numeral, the CTA */
  --eg-ptr-num-up:   -7.5pt;  /* Arabic rides higher than the Roman */
  --eg-ptr-site:      8.5pt;  /* gotarok.com foot line */
  --eg-ptr-what:     10.5pt;  /* W1 what-you-get line */
  --eg-li-pip:         17pt;  /* suit pip bullets in the W2 list */
  --eg-pip-y-heart:   1.5pt;  /* per-suit optical baseline */
  --eg-pip-y-diamond: 0.5pt;
  --eg-pip-y-spade:  0.75pt;
  --eg-pip-y-club:   0.75pt;
}

/* ============================================================
   WEB LAYER TOKENS (v1, website session 2026-07-19)
   Scoped to .eg-web. The website reuses every palette, family
   and dot/card token above; these add only what the screen
   needs: a px type scale, px spacing, links, one focus style,
   and form-control values. Breakpoints cannot resolve var()
   inside a media/container query, so they are DECLARED here as
   the single source and RESTATED verbatim in blocks.css, each
   commented with the token it mirrors (same discipline as
   page-masters.css). No em dashes, no hardcoded values elsewhere.
   ============================================================ */

.eg-web {

  /* ---------- Breakpoints (mirror in blocks.css queries) ---------- */
  --eg-bp-sm:  640px;   /* mobile ends, tablet begins */
  --eg-bp-lg: 1024px;   /* tablet ends, desktop begins */

  /* ---------- Layout widths ---------- */
  --eg-w-page-max:   1180px;  /* site content maximum */
  --eg-w-read-max:     68ch;  /* long-form reading measure */
  --eg-w-header-h:     64px;  /* header bar height */
  --eg-w-gap-grid:     20px;  /* card-grid gutter */

  /* ---------- Web type scale (px, screen) ---------- */
  --eg-w-fs-display: 40px;  --eg-w-lh-display: 1.06;  /* hero title */
  --eg-w-fs-h1:      30px;  --eg-w-lh-h1:      1.12;  /* page / list header */
  --eg-w-fs-h2:      23px;  --eg-w-lh-h2:      1.18;  /* panel / card titles */
  --eg-w-fs-h3:      19px;  --eg-w-lh-h3:      1.25;
  --eg-w-fs-lead:    20px;  --eg-w-lh-lead:    1.45;  /* subtitle, intro */
  --eg-w-fs-body:    17px;  --eg-w-lh-body:    1.6;
  --eg-w-fs-small:   15px;  --eg-w-lh-small:   1.5;
  --eg-w-fs-label:   12px;  --eg-w-lh-label:   1.3;   /* Inter caps: nav, meta */
  --eg-w-fs-tiny:    11px;

  /* desktop bumps (applied via @container in blocks.css) */
  --eg-w-fs-display-lg: 60px;
  --eg-w-fs-h1-lg:      40px;

  /* ---------- Web spacing (px) ---------- */
  --eg-w-sp-1:  4px;
  --eg-w-sp-2:  8px;
  --eg-w-sp-3: 12px;
  --eg-w-sp-4: 16px;
  --eg-w-sp-5: 24px;
  --eg-w-sp-6: 32px;
  --eg-w-sp-7: 48px;
  --eg-w-sp-8: 72px;

  /* ---------- Web radii (house rule: near-square) ---------- */
  --eg-w-radius:      4px;   /* buttons, inputs, tabs */
  --eg-w-radius-card: 6px;   /* content cards */

  /* ---------- Links (one treatment sitewide) ---------- */
  --eg-link:            var(--eg-red-deep);   /* 7:1 on paper, AA pass */
  --eg-link-hover:      var(--eg-red);
  --eg-link-underline:  var(--eg-red-wash);   /* resting underline colour */
  --eg-link-offset:     2px;

  /* ---------- Focus (N4: one visible style everywhere) ---------- */
  --eg-focus-ring:   var(--eg-red);
  --eg-focus-w:      2px;
  --eg-focus-offset: 2px;

  /* ---------- Form controls ---------- */
  --eg-control-h:          48px;               /* >= 44px touch target */
  --eg-input-bg:           var(--eg-card-white);
  --eg-input-fg:           var(--eg-ink);
  --eg-input-border:       var(--eg-ink-3);    /* 4.6:1, AA pass for boundaries */
  --eg-input-border-focus: var(--eg-red);
  --eg-input-radius:       var(--eg-w-radius);
  --eg-input-px:           14px;               /* horizontal padding */

  /* button: white on red-deep = 7.4:1 (AA); red alone would only reach ~4.0 */
  --eg-btn-bg:       var(--eg-red-deep);
  --eg-btn-bg-hover: #7A0619;
  --eg-btn-fg:       #FFFFFF;
  --eg-btn-radius:   var(--eg-w-radius);
  /* secondary / ghost button */
  --eg-btn2-bg:      transparent;
  --eg-btn2-fg:      var(--eg-ink);
  --eg-btn2-border:  var(--eg-ink);

  /* ---------- Status messages (form ok / error) ---------- */
  --eg-status-ok:    var(--eg-pine);   /* 6.5:1 on paper */
  --eg-status-error: var(--eg-red-deep);

  /* ---------- Web playing-card sizing ---------- */
  --eg-w-card:    88px;   /* hero art, hand */
  --eg-w-card-sm: 56px;   /* meta thumbs, middle backs */
  --eg-w-ov-hand: -40px;  /* 48px sliver of an 88px card */
}