/* ============================================
   VIKTORIA NAILS — DESIGN TOKENS
   "The Curated Sanctuary" Design System
   ============================================ */

:root {
  /* ── Primary — Gold ── */
  --primary: #735b24;
  --primary-container: #c8a96a;
  --primary-fixed: #ffdf9f;
  --primary-fixed-dim: #e3c281;
  --on-primary: #ffffff;
  --on-primary-container: #533d07;
  --on-primary-fixed: #261a00;

  /* ── Secondary ── */
  --secondary: #6c5c44;
  --secondary-container: #f6dfc0;
  --secondary-fixed: #f6dfc0;
  --secondary-fixed-dim: #d9c4a5;
  --on-secondary: #ffffff;
  --on-secondary-container: #726249;

  /* ── Tertiary ── */
  --tertiary: #5f5e5e;
  --tertiary-container: #aeacac;
  --on-tertiary: #ffffff;
  --on-tertiary-container: #414040;

  /* ── Surface Hierarchy — Tonal Layering ── */
  --surface: #fdf9f5;
  --surface-bright: #fdf9f5;
  --surface-dim: #ddd9d6;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f7f3ef;
  --surface-container: #f1ede9;
  --surface-container-high: #ebe7e4;
  --surface-container-highest: #e6e2de;
  --surface-variant: #e6e2de;
  --surface-tint: #735b24;

  /* ── Text ── */
  --on-surface: #1c1c19;
  --on-surface-variant: #4d463a;
  --on-background: #1c1c19;
  --background: #fdf9f5;

  /* ── Outline ── */
  --outline: #7f7668;
  --outline-variant: #d0c5b5;

  /* ── Inverse ── */
  --inverse-surface: #31302e;
  --inverse-on-surface: #f4f0ec;
  --inverse-primary: #e3c281;

  /* ── Error ── */
  --error: #ba1a1a;
  --error-container: #ffdad6;
  --on-error: #ffffff;
  --on-error-container: #93000a;

  /* ── Typography ── */
  --font-headline: 'Noto Serif', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-label: 'Inter', system-ui, sans-serif;

  /* ── Spacing — 8px rhythm ── */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  --space-32: 8rem;     /* 128px */

  /* ── Border Radius — Soft spa aesthetic ── */
  --radius-xs: 0.125rem;  /* 2px */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-full: 9999px;

  /* ── Shadows — Ambient Light (NOT drop shadows) ── */
  --shadow-editorial: 0 40px 80px -20px rgba(28, 28, 25, 0.05);
  --shadow-ambient: 0 40px 60px -15px rgba(28, 28, 25, 0.04);
  --shadow-card: 0 20px 40px -10px rgba(28, 28, 25, 0.06);
  --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.05);
  --shadow-bottom-nav: 0 -4px 20px rgba(0, 0, 0, 0.05);

  /* ── Gradients ── */
  --gradient-gold: linear-gradient(135deg, #735b24 0%, #c8a96a 50%, #e3c281 100%);
  --gradient-gold-subtle: linear-gradient(135deg, rgba(115, 91, 36, 0.08) 0%, rgba(200, 169, 106, 0.08) 100%);

  /* ── Glass ── */
  --glass-bg: rgba(253, 249, 245, 0.8);
  --glass-blur: blur(20px);
  --glass-border: rgba(208, 197, 181, 0.2);

  /* ── Transitions ── */
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-reveal: 700ms;

  /* ── Z-index scale ── */
  --z-base: 0;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-nav: 50;
  --z-overlay: 100;
  --z-modal: 200;

  /* ── Layout ── */
  --max-width: 80rem;     /* 1280px */
  --content-padding: var(--space-6);
}

/* ── Desktop overrides ── */
@media (min-width: 1024px) {
  :root {
    --content-padding: var(--space-8);
  }
}