/* =========================================================
   ARPOZAN Products — design tokens
   Art direction: Aman × Bulgari — black luxe
   Shared across all 6 product landings + home hub
   ========================================================= */

:root, [data-theme='dark'] {
  /* Surfaces — obsidian → onyx → graphite */
  --color-bg: #0A0908;
  --color-surface: #121110;
  --color-surface-2: #1A1815;
  --color-surface-offset: #221F1B;
  --color-divider: #2B2722;
  --color-border: #3A332A;

  /* Text — ivory & taupe */
  --color-text: #EFE7D6;
  --color-text-muted: #9C8F76;
  --color-text-faint: #5C5446;
  --color-text-inverse: #0A0908;

  --color-primary: #EFE7D6;
  --color-primary-hover: #FFF8E7;

  /* Accent — champagne gold */
  --color-accent: #C9A86A;
  --color-accent-hover: #D9BC82;
  --color-accent-soft: #2A2218;
  --color-accent-deep: #8C7340;
}

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
  --text-3xl: clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --text-hero: clamp(3.25rem, 1.5rem + 7vw, 8rem);

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem; --space-4: 1rem;
  --space-5: 1.25rem;  --space-6: 1.5rem;   --space-8: 2rem;    --space-10: 2.5rem;
  --space-12: 3rem;    --space-16: 4rem;    --space-20: 5rem;   --space-24: 6rem;
  --space-32: 8rem;    --space-40: 10rem;

  --content-narrow: 640px;
  --content-default: 1100px;
  --content-wide: 1360px;
  --content-ultra: 1560px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-pill: 999px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);

  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* Subtle gold film overlay — shared across pages */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(ellipse 1200px 800px at 50% -10%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%),
    radial-gradient(ellipse 900px 600px at 80% 110%, color-mix(in srgb, var(--color-accent) 5%, transparent), transparent 70%);
  mix-blend-mode: screen;
  opacity: .9;
}