/* Vivaan Luxury Editorial — Color tokens
   Extracted from brand spec. Base tokens first, semantic aliases below. */

:root {
  /* Base palette */
  --vivaan-gold: #c9973a;
  --vivaan-taupe: #8b7355;
  --vivaan-cream: #f5f0e8;
  --vivaan-overlay-dark: #1a1a1a;
  --vivaan-black: #000000;
  --vivaan-white: #ffffff;
  --vivaan-hairline: #d4c9b0;

  /* Semantic — action */
  --color-action-primary: var(--vivaan-gold);
  --color-action-primary-text: var(--vivaan-white);
  --color-action-primary-hover: #b88530; /* slightly deepened gold */

  /* Semantic — text */
  --color-text-primary: var(--vivaan-black);
  --color-text-secondary: var(--vivaan-taupe);
  --color-text-on-dark: var(--vivaan-white);
  /* Darkened gold for text/links on light backgrounds — the base
     --vivaan-gold (#c9973a) is ~2.6:1 against white/cream, below WCAG AA's
     4.5:1 for body text (flagged by PageSpeed's contrast audit). This
     variant is ~4.9:1 against white. Buttons/badges that put white text on
     a gold FILL should keep --vivaan-gold — this token is for gold TEXT on
     a light surface only. */
  --vivaan-gold-text: #8a6f1e;

  /* Semantic — surface */
  --color-surface-page: var(--vivaan-white);
  --color-surface-panel: var(--vivaan-cream);
  --color-surface-overlay-nav: rgba(0, 0, 0, 0.2);
  --color-surface-overlay-scrim: rgba(26, 26, 26, 0.45);

  /* Semantic — border */
  --color-border-hairline: var(--vivaan-hairline);
  --color-border-on-dark: var(--vivaan-white);
}