/* The Story House — design tokens v2.2
   Mirrored verbatim from the brand repo (01_system/tokens.json → tokens/tokens.css).
   Do not add values that are not in the source. */

:root {
  /* ── Palette (exactly six colours — flat, no tints or shades) ───────────── */
  --tsh-aubergine: #4F364B;   /* the only dark ink — never pure black for text */
  --tsh-vermillion: #DB3E1D;  /* signature accent — display sizes only         */
  --tsh-paper: #F3F1EB;       /* canonical warm surface                        */
  --tsh-white: #FFFFFF;       /* cool surface / reversed                       */
  --tsh-lilac: #CABAD7;       /* soft surface + marker — never text            */
  --tsh-black: #000000;       /* detail only, rare                             */

  /* Semantic aliases — prefer these in layouts */
  --tsh-ink: var(--tsh-aubergine);
  --tsh-ink-reversed: var(--tsh-paper);
  --tsh-accent: var(--tsh-vermillion);
  --tsh-surface: var(--tsh-paper);
  --tsh-surface-cool: var(--tsh-white);
  --tsh-surface-soft: var(--tsh-lilac);
  --tsh-surface-deep: var(--tsh-aubergine);
  --tsh-surface-energy: var(--tsh-vermillion);
  --tsh-marker: var(--tsh-lilac);

  /* ── Type families ─────────────────────────────────────────────────────── */
  --tsh-font-display: "The Seasons", Georgia, serif;
  --tsh-font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;

  /* ── Type scale — document / web context ───────────────────────────────── */
  --tsh-h1-size: clamp(40px, 7vw, 76px);
  --tsh-h1-weight: 300;
  --tsh-h1-lh: 1.05; /* @kind other */
  --tsh-h1-track: -0.02em;

  --tsh-h2-size: clamp(28px, 4vw, 42px);
  --tsh-h2-weight: 400;
  --tsh-h2-lh: 1.15; /* @kind other */
  --tsh-h2-track: -0.015em;

  --tsh-h3-size: 24px;
  --tsh-h3-weight: 400;
  --tsh-h3-lh: 1.2; /* @kind other */
  --tsh-h3-track: -0.01em;

  --tsh-lede-size: 20px;
  --tsh-lede-lh: 1.55; /* @kind other */

  --tsh-body-size: 17px;
  --tsh-body-lh: 1.65; /* @kind other */

  --tsh-caption-size: 15px;
  --tsh-caption-lh: 1.5; /* @kind other */

  --tsh-label-size: 13px;
  --tsh-label-weight: 700;
  --tsh-label-lh: 1.4; /* @kind other */
  --tsh-label-track: 0.14em;

  /* ── Type scale — 1080×1350 post canvas (the native social format) ─────── */
  --tsh-post-h1-size: 108px;   /* range 96–120 */
  --tsh-post-h2-size: 68px;    /* range 64–72  */
  --tsh-post-h3-size: 52px;    /* range 48–56  */
  --tsh-post-lede-size: 46px;  /* range 44–48  */
  --tsh-post-body-size: 37px;  /* range 34–40  */
  --tsh-post-caption-size: 29px;
  --tsh-post-label-size: 25px;
  --tsh-post-min-legible: 24px; /* hard floor in-feed */
  --tsh-post-serif-floor: 40px; /* below this, switch display -> sans */

  /* ── Spacing — base 4, nothing between steps ───────────────────────────── */
  --tsh-space-4: 4px;
  --tsh-space-8: 8px;
  --tsh-space-12: 12px;
  --tsh-space-16: 16px;
  --tsh-space-24: 24px;
  --tsh-space-32: 32px;
  --tsh-space-48: 48px;
  --tsh-space-64: 64px;
  --tsh-space-96: 96px;

  /* ── Grid and geometry ─────────────────────────────────────────────────── */
  --tsh-safe-margin-pct: 8%;
  --tsh-safe-margin-post: 86px;  /* 8% of 1080 */
  --tsh-safe-margin-min: 64px;
  --tsh-grid-columns: 6; /* @kind other */
  --tsh-grid-gutter: 24px;
  --tsh-grid-column: 131px;
  --tsh-story-safe-area: 250px;  /* top and bottom, 9:16 */
  --tsh-measure: 68ch; /* @kind other */

  --tsh-radius: 0;               /* square corners, always */
  --tsh-shadow: none;            /* the system defines no shadows */

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --tsh-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --tsh-duration: 0.5s; /* @kind other */
  --tsh-duration-wipe: 0.35s; /* @kind other */
}