/* ============================================================
   Via Vinita - design tokens (single source of brand values)
   Layout and components never hard-code colours: they use these tokens.
   Palette taken from the Via Vinita logo (black lettering, grey ribbon
   and tagline bar) and the old site's blush accent (#e9cad2).
   Token names are shared with the admin styles, so "forest" and "gold"
   are the dark and accent roles, not literal colours.
   ============================================================ */
:root {
  /* Brand */
  --color-primary: #111111;        /* logo black - primary actions (Add to Bag, Checkout); 18.9:1 on white */
  --color-primary-hover: #3a3a3a;
  --color-primary-soft: #f3f3f3;   /* tinted backgrounds, selected states */
  --color-forest: #111111;         /* dark role - header strip, footer, headings */
  --color-forest-dark: #000000;
  --color-gold: #9c5d6c;           /* blush accent, deepened for legibility - eyebrows, decoration; 5.6:1 on white */
  --color-gold-soft: #f7eaee;      /* the old site's #e9cad2, lightened for panels */
  --color-sage: #6d6d6d;           /* logo grey bar - quiet accents */
  --color-cream: #f8f6f6;          /* page sections */
  --color-sale: #b3261e;           /* sale price / sale badge; 6.5:1 on white */

  /* Neutrals */
  --color-text: #1c1c1c;
  --color-muted: #555555;
  --color-subtle: #6b6b6b;
  --color-border: #e6e6e6;
  --color-border-strong: #cfcfcf;
  --color-surface: #f5f5f5;
  --color-white: #ffffff;

  /* Semantic states */
  --color-success: #0f6b3f;
  --color-success-soft: #e8f6ee;
  --color-warning: #8a5300;
  --color-warning-soft: #fff6e5;
  --color-error: #b3261e;
  --color-error-soft: #fdeceb;
  --color-info: #1c4f8a;
  --color-info-soft: #eaf2fb;

  /* Type */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Oswald", "Arial Narrow", Arial, sans-serif;   /* headings - the old site's font, echoes the tall logo letters */

  /* Shape */
  --radius-sm: .125rem;
  --radius-md: .25rem;
  --radius-lg: .25rem;
  --radius-xl: .375rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06);
  --shadow-card-hover: 0 10px 28px rgb(0 0 0 / .12);
  --shadow-dropdown: 0 16px 40px rgb(0 0 0 / .16);

  /* Bootstrap mapped onto the brand tokens */
  --bs-body-font-family: var(--font-sans);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-white);
  --bs-link-color: var(--color-primary);
  --bs-link-color-rgb: 17, 17, 17;
  --bs-link-hover-color: var(--color-primary-hover);
  --bs-link-hover-color-rgb: 58, 58, 58;
  --bs-border-color: var(--color-border);
  --bs-border-radius: var(--radius-lg);
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: 17, 17, 17;
  --bs-secondary-color: var(--color-muted);
  --bs-focus-ring-color: rgb(17 17 17 / .25);
}