/* =========================================================
   Writetyper — Design Tokens
   A single source of truth for color, type, spacing, motion.
   Theming (e.g. future dark mode) only needs to override these.
   ========================================================= */

:root {
  /* ---- Palette ---- */
  --cream: #f8f5ee;
  --cream-deep: #efe9dc;
  --paper: #fdfbf5;
  --paper-shade: #f1ead8;
  --paper-line: #e7dcc4;

  --ink: #2b2826;          /* dark charcoal text */
  --ink-soft: #4f4944;
  --ink-faint: #8a8076;

  --brown: #8b6f47;        /* muted brown accent */
  --brown-deep: #6b5436;
  --brown-soft: #b89b76;

  --forest: #2f4a3c;       /* deep forest green button */
  --forest-bright: #3a5c49;
  --forest-deep: #233a2f;

  --gold: #c9a227;         /* subtle gold highlight */
  --gold-soft: #d8bd6a;

  --machine: #2a2723;      /* typewriter body */
  --machine-hi: #423d36;
  --machine-lo: #161310;
  --rubber: #211d1a;       /* platen */
  --key-face: #f3ecdd;
  --key-ring: #1c1916;

  /* ---- Semantic ---- */
  --bg: var(--cream);
  --surface: var(--paper);
  --text: var(--ink);
  --text-muted: var(--ink-soft);
  --accent: var(--brown);
  --action: var(--forest);
  --action-hover: var(--forest-bright);
  --focus-ring: var(--gold);

  /* ---- Typography ---- */
  --font-serif: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-type: "Special Elite", "Courier Prime", ui-monospace, "Courier New", monospace;

  --fs-title: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  --fs-subtitle: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  --fs-legend: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --fs-prompt: clamp(1.02rem, 0.8rem + 1.05vw, 1.45rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;

  /* ---- Spacing scale ---- */
  --sp-1: 0.35rem;
  --sp-2: 0.6rem;
  --sp-3: 1rem;
  --sp-4: 1.6rem;
  --sp-5: 2.4rem;
  --sp-6: 3.6rem;

  /* ---- Geometry ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --maxw: 980px;

  /* ---- Shadow / depth ---- */
  --shadow-paper: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 18px 40px -22px rgba(60, 46, 28, 0.55),
    0 2px 6px -2px rgba(60, 46, 28, 0.25);
  --shadow-soft: 0 14px 36px -20px rgba(43, 31, 18, 0.45);
  --shadow-machine: 0 30px 60px -28px rgba(20, 14, 8, 0.7),
    0 8px 18px -10px rgba(20, 14, 8, 0.5);
  --shadow-lift: 0 18px 30px -14px rgba(35, 58, 47, 0.55);

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);
  --t-fast: 140ms;
  --t-med: 320ms;
  --t-slow: 620ms;
}