/* ============================================================================
 * tokens.css — the single source of truth for design values.
 * These are CSS "custom properties" (variables). Define once, reuse everywhere
 * via var(--name). Changing a value here updates the whole app.
 * Values come from design.md §4 (color), §6 (type/space), §13 (motion).
 * ========================================================================== */
:root {
  /* --- Brand gold -------------------------------------------------------- */
  /* Gold is for FILLS / BORDERS / brand. For gold-colored TEXT on light,
     use --gold-ink (passes contrast). See design.md §4.1. */
  --gold-100: #F6E7B2;   /* champagne highlight */
  --gold-300: #E0C57C;
  --gold-500: #C0A056;   /* core brand gold — fills/borders only on light */
  --gold-700: #7E5E24;   /* gold text on light (AA, ~6:1) */
  --gold-ink: #67501E;   /* gold text on light (AAA, ~7.7:1) — links/icons/labels */
  /* Primary-button fill. Stops at #957231 (no dark #67501E tail) so CTAs read
     as bright gold, not muddy bronze. */
  --gold-gradient: linear-gradient(180deg,#F6E7B2 0%,#E0C57C 26%,#C0A056 62%,#957231 100%);

  /* --- Surfaces (warm neutrals, echoing the brand black) ----------------- */
  --bg:           #FAF8F3;  /* app background — warm ivory */
  --surface:      #FFFFFF;  /* cards, tables, modals */
  --surface-2:    #F4F1EA;  /* subtle fills, table header, hover rows */
  --surface-3:    #ECE7DB;  /* darker fill step: control hover / selected chip */
  --border:       #E7E1D4;  /* hairline dividers/borders */
  --border-strong:#D8CFBC;

  /* --- Text ------------------------------------------------------------- */
  --text:       #14110B;  /* primary (warm near-black) */
  --text-2:     #5E564B;  /* secondary */
  --text-muted: #8C8276;  /* tertiary/captions (use ≥14px) */
  --on-gold:    #14110B;  /* text/icon placed ON a gold fill */
  --on-dark:    #F7F2E7;  /* text placed ON the charcoal brand band */
  --brand-dark: #14110B;  /* charcoal brand band / login bg */

  /* --- Semantic (kept distinct from brand gold) ------------------------- */
  --success: #2E7D32;  --success-bg:#E7F2E8;
  --warning: #B45309;  --warning-bg:#FBEBD7;   /* amber-orange, NOT gold */
  --danger:  #C0392B;  --danger-bg: #FBE9E7;
  --info:    #2563EB;  --info-bg:   #E8EEFD;

  /* --- Focus ring ------------------------------------------------------- */
  --ring: #7E5E24;

  /* --- Fonts ------------------------------------------------------------ */
  --font-brand: "Cinzel", Georgia, serif;                 /* brand/logo only */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Type scale (px) -------------------------------------------------- */
  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.875rem;  /* 14 */
  --fs-base: 1rem;    /* 16 */
  --fs-lg: 1.125rem;  /* 18 */
  --fs-xl: 1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;   /* 24 */
  --fs-3xl: 1.875rem; /* 30 */
  --fs-4xl: 2.25rem;  /* 36 */

  /* --- Spacing — 4/8 rhythm --------------------------------------------- */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;

  /* --- Radius ----------------------------------------------------------- */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-pill:999px;

  /* --- Elevation (soft, warm) ------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(20,17,11,.06);
  --shadow-md: 0 4px 14px rgba(20,17,11,.08);
  --shadow-lg: 0 16px 40px rgba(20,17,11,.12);

  /* --- Z-index scale ---------------------------------------------------- */
  --z-dropdown:1000; --z-sticky:1020; --z-header:1030;
  --z-drawer:1040; --z-modal:1050; --z-toast:1060; --z-tooltip:1070;

  /* --- Motion ----------------------------------------------------------- */
  --dur-fast:150ms; --dur:200ms; --dur-slow:280ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
}