/* ===========================================================================
   Genesis — Color tokens
   Warm editorial luxury. Cream surfaces, charcoal-brown text, champagne gold
   reserved exclusively for interactive elements. Never pure black or white.
   =========================================================================== */

:root {
  /* --- Brand / interactive --- */
  --gold: #C9A66B;          /* Primary — CTAs, links, active states, focus */
  --gold-hover: #B89054;    /* Darker champagne gold for hover */
  --blush: #D89AA6;         /* Secondary — subtle accents, highlights */
  --blush-soft: #F3E4E6;    /* Decorative background, secondary surface */
  --blush-ink: #A35D6D;     /* Readable blush text on soft blush */

  /* --- Neutrals / surfaces --- */
  --bg: #F8F5F1;            /* Page background, warm off-white */
  --surface: #FFFCF9;       /* Cards, panels, modals, nav — creamy white */
  --surface-sunken: #F5F0EA;/* Chips, hovered list rows, wells */
  --border: #ECE6E0;        /* Subtle warm dividers */
  --border-strong: #E5DDD4; /* Input / control borders */

  /* --- Text --- */
  --ink: #1C1A18;           /* Primary text & headings, charcoal-brown */
  --ink-2: #726C66;         /* Descriptions, metadata, secondary labels */
  --ink-3: #A8A29E;         /* Muted text, placeholders, disabled, timestamps */

  /* --- Semantic --- */
  --success: #5F8A66;       /* Published / positive */
  --warning: #C6943A;       /* Pending / caution */
  --error: #C26A5C;         /* Destructive / validation error */
  --success-soft: #E6EDE6;
  --warning-soft: #F5EAD5;
  --error-soft: #F3E2DE;

  /* ---------------------------------------------------------------------
     Semantic aliases — prefer these in component CSS
     --------------------------------------------------------------------- */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-sunken: var(--surface-sunken);
  --color-primary: var(--gold);
  --color-primary-hover: var(--gold-hover);
  --color-accent: var(--blush);
  --color-accent-soft: var(--blush-soft);

  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --text-on-primary: #FFFFFF;

  --border-subtle: var(--border);
  --border-control: var(--border-strong);

  --focus-ring: 0 0 0 3px rgba(201, 166, 107, 0.15);
}