/* ============================================================
   Skholē — design tokens
   Paste into src/css/tokens.css and @import first.
   Eleventy note: nothing here depends on JS. Every component in
   the system is expressible as an .njk partial + these vars.
   ============================================================ */

@font-face {
  font-family: "Jackson MN";
  src: url("/fonts/JacksonMN-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Paper (backgrounds) ---------------------------------- */
  --paper:        #f2ece1;  /* page ground — warm cream */
  --paper-sunk:   #e8dfd0;  /* recessed panels, table stripes */
  --paper-raised: #f8f4ec;  /* cards lifted off the page */
  --paper-tile:   #ded2be;  /* cerámica / baldosa fields */
  --paper-desk:   #e5dbc9;  /* the desk the sheet sits on */

  /* ---- Ink (foregrounds) ----------------------------------- */
  --ink:          #2b2118;  /* body text, hairlines, bevels */
  --ink-2:        #6b5c4b;  /* secondary text */
  --ink-3:        #9a8974;  /* mono labels, metadata */

  /* ---- Terracotta + two earth tones ------------------------ */
  --terracotta:   #a13a1e;  /* primary. headings, marks, links */
  --terracotta-w: #c4562f;  /* washed — hover, large fills */
  --ochre:        #b79858;  /* secondary. rules, tags, tiles */
  --espresso:     #542916;  /* deep. inverted blocks, footers */

  /* ---- The digital half: one system accent, used sparingly -- */
  --porcelain:    #88b8ce;  /* selection, focus, active tab, "new" */

  /* ---- Hairlines & bevels ---------------------------------- */
  --rule:         1px solid #2b211833;
  --rule-strong:  1px solid #2b2118;
  --rule-heavy:   3px solid #2b2118;
  --bevel-out:    inset -1px -1px 0 #2b211826, inset 1px 1px 0 #ffffffb3;
  --bevel-in:     inset 1px 1px 0 #2b211826, inset -1px -1px 0 #ffffffb3;
  --stamp:        3px 3px 0 #2b2118;  /* hard offset shadow, no blur */

  /* ---- Type families -------------------------------------- */
  --font-poster: "Anton", "Helvetica Neue", Impact, sans-serif;
  /* Wordmark ONLY — the five letters of SKHOLE, nothing else.
     Jackson (B. Jacquet, Mecanorma 1971), self-hosted. Closed apertures:
     40px hard minimum — header lockup and home masthead both set 42px,
     the cover sets clamp(38px, 8.2vw, 98px). No case contrast, no macron. */
  --font-wordmark: "Jackson MN", "Anton", Impact, sans-serif;
  --font-cond:   "Barlow Condensed", "Helvetica Neue", sans-serif;
  --font-read:   "Newsreader", Georgia, serif;
  --font-mono:   "Courier Prime", "Courier New", monospace;
  --font-hand:   "Caveat Brush", cursive;  /* red felt-tip, not a fountain pen */

  /* ---- Type scale (1.25 minor third, 16px base) ------------ */
  --t-mono:   0.6875rem; /* 11px  system labels, all-caps, .14em tracked */
  --t-fine:   0.8125rem; /* 13px  captions, credits, footnotes */
  --t-small:  0.9375rem; /* 15px  metadata, tags */
  --t-body:   1.0625rem; /* 17px  reading text */
  --t-lead:   1.375rem;  /* 22px  standfirst */
  --t-h3:     1.75rem;   /* 28px */
  --t-h2:     2.75rem;   /* 44px */
  --t-h1:     4.5rem;    /* 72px */
  --t-poster: 9rem;      /* 144px masthead, clamp on mobile */

  --lh-tight: 0.92;
  --lh-head:  1.04;
  --lh-body:  1.62;
  --track-mono: 0.14em;
  --track-poster: -0.02em;  /* Anton. The wordmark tracks 0. */

  /* ---- Space (4px base, doubling) -------------------------- */
  --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: 144px;

  /* ---- Grid ------------------------------------------------ */
  --measure: 1180px;   /* content max-width */
  --prose:   62ch;     /* reading measure */
  --cols: 12;
  --gutter: var(--s-5);       /* 24px editorial pages */
  --gutter-collage: var(--s-3); /* 12px home collage — dense, not airy */
  --rail: 22px;               /* vertical mono edge rails */

  /* ---- Collage tilt (the "taped" look) --------------------- */
  --tilt: 1;           /* multiplier; set to 0 to straighten everything */
  --angle: 0deg;       /* per-tile, written inline by the collage macro */
  --span: 3;           /* per-tile, written inline by the collage macro */
  --fig-h: 224px;      /* per-figure, from the figHeight filter */
  --tape: #ded2bee6;

  /* ---- Motion --------------------------------------------- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --fast: 120ms;
  --slow: 320ms;

  /* ---- Paper grain (procedural, no image asset) ------------ */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* Grain overlay — one element, fixed, multiply. */
.grain::after {
  content: ""; position: fixed; inset: 0; z-index: 60;
  pointer-events: none; mix-blend-mode: multiply; opacity: .3;
  background-image: var(--grain); background-size: 140px;
}

/* Reduced motion: kill the tilt too — it reads as motion to some. */
@media (prefers-reduced-motion: reduce) {
  @font-face {
  font-family: "Jackson MN";
  src: url("/fonts/JacksonMN-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root { --tilt: 0; }
  * { animation: none !important; transition: none !important; }
}