/* ============================================================
   NETOVELLE STORES — CENTRALISED DESIGN TOKENS (Phase 1)
   Master Design Authority: NETOVELLE DIGITAL BRAND & PRODUCT
   DESIGN SYSTEM V1. Do not hard-code colours/fonts elsewhere —
   always reference these tokens.
   ============================================================ */

:root {
  /* ---------- PRIMARY BRAND COLOURS ---------- */
  --nv-milk: #FBF2E3;           /* dominant background */
  --nv-deep-blue: #10233A;      /* primary structural / brand colour */
  --nv-gold: #C5963A;           /* primary luxury accent */

  /* ---------- SECONDARY / SUPPORTING COLOURS ---------- */
  --nv-rich-gold: #B57C22;
  --nv-champagne-gold: #E1BD78;
  --nv-soft-white: #FFFDF8;
  --nv-warm-champagne: #F1E1C9;
  --nv-blue-grey: #30445A;
  --nv-warm-neutral: #6D655B;

  /* ---------- SEMANTIC ALIASES ---------- */
  --nv-bg: var(--nv-milk);
  --nv-surface: var(--nv-soft-white);
  --nv-surface-alt: var(--nv-warm-champagne);
  --nv-text-primary: var(--nv-deep-blue);
  --nv-text-secondary: var(--nv-blue-grey);
  --nv-text-muted: var(--nv-warm-neutral);
  --nv-border: rgba(16, 35, 58, 0.12);
  --nv-border-gold: rgba(197, 150, 58, 0.55);
  --nv-accent: var(--nv-gold);
  --nv-accent-deep: var(--nv-rich-gold);
  --nv-accent-light: var(--nv-champagne-gold);
  --nv-deep-blue-hover: #17324f;  /* deep-blue family, lightened for hover states */

  /* ---------- STATE COLOURS (kept within brand family) ---------- */
  --nv-success: #2F6B4F;
  --nv-error: #8A3324;
  --nv-focus-ring: rgba(197, 150, 58, 0.55);

  /* ---------- TYPOGRAPHY ---------- */
  --nv-font-display: 'Cormorant Garamond', 'Georgia', serif;
  --nv-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --nv-fs-h1: clamp(2.1rem, 6vw, 3.4rem);
  --nv-fs-h2: clamp(1.6rem, 4.4vw, 2.4rem);
  --nv-fs-h3: clamp(1.25rem, 3.2vw, 1.6rem);
  --nv-fs-body: 1rem;
  --nv-fs-small: 0.875rem;
  --nv-fs-caption: 0.75rem;
  --nv-fs-price: 1.125rem;
  --nv-fs-nav: 0.95rem;

  --nv-lh-display: 1.15;
  --nv-lh-body: 1.6;

  /* ---------- SPACING SCALE ---------- */
  --nv-space-1: 4px;
  --nv-space-2: 8px;
  --nv-space-3: 12px;
  --nv-space-4: 16px;
  --nv-space-5: 20px;
  --nv-space-6: 24px;
  --nv-space-8: 32px;
  --nv-space-10: 40px;
  --nv-space-12: 48px;
  --nv-space-16: 64px;
  --nv-space-20: 80px;

  /* ---------- RADIUS ---------- */
  --nv-radius-sm: 4px;
  --nv-radius-md: 8px;
  --nv-radius-lg: 14px;
  --nv-radius-pill: 999px;

  /* ---------- SHADOWS (minimal, restrained) ---------- */
  --nv-shadow-sm: 0 1px 3px rgba(16, 35, 58, 0.06);
  --nv-shadow-md: 0 4px 16px rgba(16, 35, 58, 0.08);
  --nv-shadow-gold: 0 2px 10px rgba(197, 150, 58, 0.18);

  /* ---------- TRANSITIONS ---------- */
  --nv-transition-fast: 150ms ease;
  --nv-transition-base: 250ms ease;
  --nv-transition-slow: 400ms ease;

  /* ---------- BREAKPOINTS (reference only, used in media queries) ---------- */
  --nv-bp-sm: 480px;
  --nv-bp-md: 768px;
  --nv-bp-lg: 1024px;
  --nv-bp-xl: 1280px;

  /* ---------- Z-INDEX SCALE ---------- */
  --nv-z-header: 100;
  --nv-z-drawer: 200;
  --nv-z-modal: 300;
  --nv-z-toast: 400;
}