/* =========================
   tokens.css
   TVTN redesign tokens
   Approved palette remains authoritative.
   ========================= */

:root {
  /* Nation palette */
  --tvk-forest: #3A3F38;
  --tvk-bone: #F2F1EC;
  --tvk-taupe: #9C937A;
  --tvk-sage: #8F9E8B;
  --tvk-stone: #6B656E;
  --tvk-mist: #96B5B8;
  --tvk-gold: #C7A961;

  /* Derived redesign colors */
  --paper: #f4efe3;
  --paper-deep: #e6dcc7;
  --paper-warm: #efe4ce;
  --ink: #211f1a;
  --ink-soft: #4d493f;
  --charcoal: #10110e;
  --forest-deep: #252a24;
  --forest-black: #11130f;
  --copper: #a94f2b;
  --copper-deep: #7f351e;
  --sand-line: rgba(58, 63, 56, 0.18);
  --gold-line: rgba(199, 169, 97, 0.68);

  /* Legacy role tokens kept for existing pages */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: color-mix(in srgb, var(--ink-soft) 78%, var(--tvk-taupe));
  --accent: var(--tvk-mist);
  --gold: var(--tvk-gold);

  --surface-0: var(--paper);
  --surface-1: rgba(244, 239, 227, 0.94);
  --surface-2: var(--forest-deep);
  --surface-3: rgba(255, 252, 244, 0.72);
  --surface-4: var(--forest-deep);
  --surface-5: #fffaf0;
  --surface-6: rgba(58, 63, 56, 0.08);

  --header-bg: var(--surface-1);
  --panel-bg: var(--surface-3);
  --panel-border: var(--sand-line);
  --rule: var(--gold-line);

  --border-1: var(--sand-line);
  --border-2: var(--gold-line);
  --border-3: rgba(58, 63, 56, 0.24);
  --border-4: rgba(58, 63, 56, 0.34);
  --border-input: rgba(58, 63, 56, 0.22);
  --border-menu: rgba(58, 63, 56, 0.14);

  --text-0: var(--ink);
  --text-1: var(--muted);
  --text-2: #fff8e9;
  --text-body: var(--ink);
  --text-link: var(--copper-deep);
  --text-badge: var(--forest-deep);
  --text-ok: #224d33;
  --text-warn: #6b4b09;
  --text-err: #7b2521;

  --crumb-1: var(--copper);
  --crumb: color-mix(in srgb, var(--ink-soft) 75%, var(--tvk-taupe));
  --crumb-link: var(--copper-deep);

  --ok: #1f7a3f;
  --warn: #b8841d;
  --err: #b43a30;

  --warn-border: color-mix(in srgb, var(--tvk-gold) 50%, var(--ink));
  --warn-bg: color-mix(in srgb, var(--tvk-gold) 16%, var(--paper));
  --lock-bg: color-mix(in srgb, var(--tvk-sage) 26%, var(--paper));
  --lock-border: color-mix(in srgb, var(--tvk-sage) 58%, var(--ink));
  --verify-border: color-mix(in srgb, var(--tvk-stone) 35%, var(--paper));
  --verified-border: color-mix(in srgb, var(--tvk-sage) 60%, var(--ink));
  --verified-bg: color-mix(in srgb, var(--tvk-sage) 24%, var(--paper));
  --unverified-border: color-mix(in srgb, #d33 45%, var(--paper));
  --unverified-bg: color-mix(in srgb, #d33 12%, var(--paper));

  /* Typography */
  --font-display: "Oswald", "League Gothic", "Arial Narrow", Impact, sans-serif;
  --font-body: "Libre Franklin", "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;

  /* Layout */
  --site-max: 1180px;
  --page-pad: clamp(18px, 4vw, 56px);
  --section-y: clamp(48px, 7vw, 96px);
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-soft: 0 18px 45px rgba(35, 31, 22, 0.16);
  --shadow-card: 0 12px 28px rgba(35, 31, 22, 0.13);
  --focus: 0 0 0 3px color-mix(in srgb, var(--tvk-mist) 65%, transparent);

  /* Asset hooks */
  --texture-paper: url("/images/redesign/paper-texture.webp");
  --texture-forest: url("/images/redesign/forest-texture.webp");
  --brush-edge: url("/images/redesign/brush-edge-horizontal.png");
}