/*
  Enrot — Design Tokens
  Source: Enrot Design Direction v3 (Final), §2 "Design System".

  Raw values only — custom properties on :root. No selectors, no component
  styling here; that belongs in main.css and template-level styles. Every
  page and future component reads color/type/spacing through these tokens,
  never the hex values directly, so the brief's palette stays the single
  source of truth as the product grows past M0.
*/

:root {
  /* ---- Color palette (exact hex per brief §2) ---- */
  --color-vellum: #f3ecdd; /* page background */
  --color-card-paper: #e7dcc3; /* cards / panels — half-step darker than Vellum */
  --color-walnut: #3b2a21; /* primary text; dominant dark surface (header, footer) */
  --color-bakelite: #1e1b18; /* admin sidebar, deepest accents */
  --color-charcoal: #2b2b2c; /* body copy on light surfaces */
  --color-brass: #b08d57; /* primary accent — labels, active states, hairlines on dark */
  --color-copper: #a5674a; /* secondary accent — hover states, secondary actions */
  --color-verdigris: #5f7863; /* the one functional "signal" color — never decorative */

  /* ---- Semantic aliases (pages/components reference these, not raw colors) ---- */
  --surface-page: var(--color-vellum);
  --surface-card: var(--color-card-paper);
  --surface-dark: var(--color-walnut);
  --surface-admin: var(--color-bakelite);
  --text-primary: var(--color-walnut);
  --text-body: var(--color-charcoal);
  --text-on-dark: var(--color-vellum);
  --accent-primary: var(--color-brass);
  --accent-secondary: var(--color-copper);
  --signal: var(--color-verdigris);
  --border-hairline: rgb(59 42 33 / 12%); /* Walnut-12%, content rules */
  --border-hairline-brass: rgb(176 141 87 / 25%); /* Brass-25% inset hairline on panel edges */

  /* ---- Typography ---- */
  --font-display: "Piazzolla", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ---- Spacing — 8px base ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- Radius — near-square. 2px cards/panels/inputs, 0 buttons/tags,
     full-round reserved for the language switch and favorite dot. ---- */
  --radius-panel: 2px;
  --radius-control: 0;
  --radius-round: 999px;

  /* ---- Shadow — one soft warm shadow only, no colored glows/neumorphism ---- */
  --shadow-resting: 0 1px 2px rgb(43 35 32 / 6%);
  --shadow-hover: 0 8px 20px rgb(43 35 32 / 8%);

  /* ---- Motion — all motion <=200ms, ease-out, no bounce ---- */
  --motion-duration: 180ms;
  --motion-easing: ease-out;
}