/* ============================================================
   THE CREST GUILD — brand tokens
   Onyx / Parchment / Gold (5% accent only). Flat, heraldic.
   Theme: data-theme="dark" (default) | "light"
   ============================================================ */

:root,
html[data-theme="dark"]{
  /* Core palette */
  --color-onyx: #0B0B0C;
  --color-parchment: #F3EFE6;
  --color-gold: #C6A15B;
  --color-slate: #3A3833;

  --color-warning: #C98A2E;
  --color-success: #3F7A55;
  --color-error: #B5432F;

  /* Neutral scale (onyx → parchment) */
  --neutral-900: #0B0B0C;
  --neutral-800: #161512;
  --neutral-700: #2A2824;
  --neutral-600: #3A3833;
  --neutral-500: #6B675F;
  --neutral-400: #9A958A;
  --neutral-300: #C9C3B6;
  --neutral-200: #E4DFD4;
  --neutral-100: #F3EFE6;

  /* Text on surfaces */
  --text-on-onyx: #EDEAE1;
  --text-on-parchment: #161512;
  --color-gold-on-parchment: #6B5228;

  /* Typography */
  --font-display: "Cormorant Garamond", "Times New Roman", Times, serif;
  --font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Geometry */
  --radius-sm: 2px;
  --radius-md: 3px;
  --border-hairline: 0.5px solid var(--neutral-700);
  --max: 1200px;

  /* Semantic surfaces (dark default) */
  --canvas: var(--color-onyx);
  --surface: var(--neutral-800);
  --surface-elevated: var(--color-slate);
  --steel-dim: var(--color-slate);
  --border: var(--neutral-700);
  --neutral-1: var(--neutral-500);
  --neutral-2: var(--neutral-400);
  --ivory: var(--text-on-onyx);
  --text: var(--text-on-onyx);
  --slate-muted: var(--neutral-500);
  --summit-blue: var(--color-gold);
  --state-expired: var(--color-error);
  --state-pending: var(--color-warning);
  --state-active: var(--color-success);
  --text-dim: color-mix(in srgb, var(--text-on-onyx) 78%, transparent);
  --text-dim2: color-mix(in srgb, var(--text-on-onyx) 64%, transparent);
  --text-on-dark: var(--text-on-onyx);
  --text-on-dark-dim: color-mix(in srgb, var(--text-on-onyx) 78%, transparent);
  --text-on-dark-dim2: color-mix(in srgb, var(--text-on-onyx) 64%, transparent);
  --accent-readable: var(--color-gold);
  --glass-bg: rgba(43, 53, 64, 0.42);
  --glass-border: rgba(241, 238, 230, 0.14);
  --sans: var(--font-body);
  --display: var(--font-display);
}

html[data-theme="light"]{
  --canvas: var(--color-parchment);
  --surface: #FFFcf6;
  --surface-elevated: var(--neutral-200);
  --steel-dim: var(--neutral-200);
  --border: var(--neutral-300);
  --border-hairline: 0.5px solid var(--neutral-300);
  /* Page text on parchment */
  --text: var(--text-on-parchment);
  --text-dim: color-mix(in srgb, var(--text-on-parchment) 82%, transparent);
  --text-dim2: color-mix(in srgb, var(--text-on-parchment) 68%, transparent);
  /* Keep light ink for dark panels (trail-detail, seals, CTAs on onyx) */
  --text-on-dark: #EDEAE1;
  --text-on-dark-dim: color-mix(in srgb, #EDEAE1 78%, transparent);
  --text-on-dark-dim2: color-mix(in srgb, #EDEAE1 64%, transparent);
  --ivory: var(--text-on-parchment);
  --accent-readable: var(--color-gold-on-parchment);
  --summit-blue: var(--color-gold-on-parchment);
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(22, 21, 18, 0.14);
  --neutral-1: var(--neutral-600);
  --neutral-2: var(--neutral-500);
}