/* ─────────────────────────────────────────────────────────────────
   Glot — design tokens (colors, type, spacing, motion).
   Referenced by index.html, preview.html, deck*.html.
   Imported before styles.css.

   Reverse-engineered from the var(--…) usage in styles.css since
   Design's delivery was missing this file. Values chosen to match
   the Linen palette + Fraunces/Inter type system used throughout.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Palette (Linen) ─────────────────────────────────────────── */
  --glot-linen:        #f5ede0;   /* page background */
  --glot-parchment:    #fdf8ef;   /* raised surface */
  --glot-cream:        #fffdf8;   /* card surface */
  --glot-divider:      #e7d5c0;   /* border / divider */
  --glot-ink:          #1c1917;   /* body text */
  --glot-ink-mute:     #78716c;   /* muted text */
  --glot-umber:        #92400e;   /* primary accent */
  --glot-umber-soft:   #b45309;   /* italic / translation */
  --glot-ok:           #2d7a5f;   /* success, "available now" */
  --glot-warn:         #a8661c;   /* warning, "coming soon" */

  /* ── Semantic color roles ────────────────────────────────────── */
  --bg:                #ffffff;
  --surface:           var(--glot-cream);
  --surface-raised:    var(--glot-parchment);
  --border:            var(--glot-divider);
  --border-strong:     #c4a57b;

  --fg:                var(--glot-ink);
  --fg-soft:           #44403c;
  --fg-mute:           var(--glot-ink-mute);
  --fg-accent:         var(--glot-umber);
  --fg-italic:         var(--glot-umber-soft);

  --cta-bg:            var(--glot-umber);
  --cta-bg-hover:      #7c3612;
  --cta-fg:            var(--glot-cream);

  /* ── Typography ──────────────────────────────────────────────── */
  --font-display:      "Fraunces", "Playfair Display", Georgia, serif;
  --font-body:         "Inter", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale — fluid between phone and desktop */
  --fs-display-xl:     clamp(2.4rem, 5.2vw, 4.2rem);
  --fs-display-l:      clamp(2rem,   4vw,   3rem);
  --fs-display-m:      clamp(1.6rem, 3vw,   2.2rem);
  --fs-lede:           clamp(1.05rem, 1.4vw, 1.2rem);
  --fs-eyebrow:        0.75rem;

  --lh-tight:          1.05;
  --lh-snug:           1.2;
  --lh-body:           1.55;

  --ls-display:        -0.012em;
  --ls-eyebrow:        0.14em;

  /* ── Spacing scale (8-pt base) ───────────────────────────────── */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           20px;
  --space-5:           32px;
  --space-6:           48px;
  --space-7:           72px;

  /* ── Layout ──────────────────────────────────────────────────── */
  --max-read:          62ch;
  --max-content:       1200px;
  --nav-h:             64px;

  /* ── Radii ───────────────────────────────────────────────────── */
  --radius-s:          8px;
  --radius-m:          12px;
  --radius-l:          18px;
  --radius-xl:         24px;

  /* ── Shadows ─────────────────────────────────────────────────── */
  --shadow-m:          0 4px 32px rgba(146, 64, 14, 0.08);

  /* ── Motion ──────────────────────────────────────────────────── */
  --dur-fast:          140ms;
  --dur-med:           240ms;
  --ease:              cubic-bezier(.4, 0, .2, 1);
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-med:  0ms;
  }
}