/* Voe Media — Colour tokens
 * "Ink anchors. Gold leads." Ink carries structure; Gold is the restrained accent.
 */
:root {
  /* ---- Core brand ---- */
  --voe-ink: #191D1E;        /* Voe Ink   — backgrounds, type, structure */
  --voe-gold: #C2A04E;       /* Voe Gold  — signature accent */

  /* ---- Support & neutrals ---- */
  --voe-antique-gold: #7B6E49; /* deeper gold — gradients, muted accent */
  --voe-slate: #787B85;        /* cool grey — secondary text, meta */
  --voe-stone: #D9D6CE;        /* warm light grey — borders, fills */
  --voe-paper: #F5F2EA;        /* warm off-white — page surface */
  --voe-plum: #6E4E80;         /* tertiary accent — used sparingly */

  /* ---- Ink ramp (derived from Voe Ink for elevation & lines on dark) ---- */
  --ink-900: #101314;
  --ink-800: #191D1E;
  --ink-700: #23282A;
  --ink-600: #2E3437;
  --ink-500: #3A4145;
  --ink-400: #4C5559;

  /* ---- Gold ramp ---- */
  --gold-700: #7B6E49;
  --gold-600: #9C8242;
  --gold-500: #C2A04E;
  --gold-400: #D2B871;
  --gold-300: #E3D2A2;

  /* ---- Paper / stone ramp (light surfaces) ---- */
  --paper-0: #FFFFFF;
  --paper-50: #FAF8F2;
  --paper-100: #F5F2EA;
  --paper-200: #ECE8DD;
  --stone-300: #D9D6CE;
  --stone-400: #C3BFB4;

  /* ---- Signature gradient ---- */
  --voe-gradient: linear-gradient(135deg, #191D1E 0%, #7B6E49 60%, #C2A04E 100%); /* @kind other */

  /* ===========================================================
   * Semantic aliases — reference these in components & UI
   * =========================================================== */

  /* Surfaces */
  --surface-page: var(--voe-paper);        /* default light page */
  --surface-card: var(--paper-0);          /* card on light page */
  --surface-sunken: var(--paper-200);      /* wells, inputs */
  --surface-ink: var(--voe-ink);           /* dark / cinematic surface */
  --surface-ink-raised: var(--ink-700);    /* raised block on dark */
  --surface-ink-sunken: var(--ink-900);    /* well on dark */

  /* Text on light */
  --text-strong: var(--voe-ink);
  --text-body: #2E3437;
  --text-muted: var(--voe-slate);
  --text-on-gold: var(--voe-ink);

  /* Text on dark */
  --text-on-ink-strong: var(--voe-paper);
  --text-on-ink: #C9CBce;
  --text-on-ink-muted: #8A8E97;

  /* Accent */
  --accent: var(--voe-gold);
  --accent-strong: var(--gold-600);
  --accent-soft: var(--gold-300);
  --accent-plum: var(--voe-plum);

  /* Lines & borders */
  --border-light: var(--stone-300);
  --border-light-soft: var(--paper-200);
  --border-ink: var(--ink-600);
  --border-gold: var(--voe-gold);

  /* Feedback (kept muted to sit beside the gold-led palette) */
  --feedback-success: #4E8A5C;
  --feedback-warning: #C2A04E;
  --feedback-danger: #B4503F;
  --feedback-info: var(--voe-slate);

  /* Focus ring */
  --focus-ring: var(--voe-gold);
}