/* ============================================================
   BENÁLAGA · DESIGN TOKENS (consolidated)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --espresso-950: #0B0907; --espresso-900: #100D0A; --espresso-850: #16120D;
  --espresso-800: #1C1813; --espresso-700: #2A241C; --espresso-600: #3A3228;
  --cream-50: #FBF8F1; --cream-100: #F5EFE4; --cream-200: #ECE4D5;
  --sand-300: #DFD4C1; --sand-400: #CBBCA3;
  --gold-200: #EBD7AE; --gold-300: #DFC691; --gold-400: #D2AD72;
  --gold-500: #C49A5C; --gold-600: #AF8540; --gold-700: #8C6A31;
  --ink-900: #1A1611; --ink-700: #3B342A; --ink-500: #6B6052; --ink-300: #968B7B;
  --paper-50: #F3EDE1; --paper-200: #D9D1C3; --paper-muted: #9C9082; --paper-faint: #6E6457;
  --success-500: #5E7A50; --success-100: #E5EADD;
  --danger-500: #9A4B3F; --danger-100: #F1E0DA;

  --bg-base: var(--espresso-900); --bg-deep: var(--espresso-950);
  --surface-raised: var(--espresso-800);
  --surface-cream: var(--cream-100); --surface-card: var(--cream-50);
  --text-on-dark: var(--paper-50); --text-on-dark-muted: var(--paper-muted);
  --text-on-dark-faint: var(--paper-faint);
  --text-on-cream: var(--ink-900); --text-on-cream-muted: var(--ink-500);
  --accent: var(--gold-500); --accent-soft: var(--gold-400);
  --accent-bright: var(--gold-300); --accent-strong: var(--gold-600);
  --hairline-dark: var(--espresso-700);
  --hairline-gold: rgba(196,154,92,0.34);
  --hairline-cream: rgba(26,22,17,0.10);
  --border-card: rgba(26,22,17,0.07);
  --selection-bg: rgba(196,154,92,0.28);

  --font-serif: 'Spectral','Iowan Old Style',Georgia,serif;
  --font-display: 'Playfair Display','Spectral',Georgia,serif;
  --font-sans: 'Hanken Grotesk',system-ui,-apple-system,sans-serif;

  --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem;
  --space-8: 4rem; --space-9: 6rem; --space-10: 8rem;
  --space-section: 7.5rem;
  --container-max: 1280px;
  --gutter: clamp(1.25rem,5vw,5rem);

  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-2xl: 36px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(26,18,8,0.06);
  --shadow-sm: 0 4px 12px -6px rgba(40,28,12,0.20);
  --shadow-card: 0 18px 44px -26px rgba(40,28,12,0.38);
  --shadow-card-hover: 0 30px 64px -28px rgba(40,28,12,0.46);
  --shadow-pop: 0 40px 90px -30px rgba(20,13,6,0.55);
  --shadow-glow-light: 0 0 1px rgba(255,255,255,0.6), 0 14px 50px -10px rgba(243,237,225,0.30);
  --shadow-glow-gold: 0 0 0 1px var(--hairline-gold), 0 20px 54px -22px rgba(196,154,92,0.40);

  --border-hairline-gold: 1px solid var(--hairline-gold);
  --border-hairline-dark: 1px solid var(--hairline-dark);
  --border-card-rule: 1px solid var(--border-card);
  --border-cream: 1px solid var(--hairline-cream);

  --ease-out: cubic-bezier(0.16,1,0.30,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --ease-soft: cubic-bezier(0.33,0,0.20,1);
  --dur-fast: 180ms; --dur: 320ms; --dur-slow: 620ms;

  --blur-panel: blur(18px);
  --scrim-dark: linear-gradient(180deg, rgba(11,9,7,0) 0%, rgba(11,9,7,0.85) 100%);
  --scrim-vignette: radial-gradient(120% 90% at 50% 38%, rgba(11,9,7,0) 30%, rgba(11,9,7,0.72) 100%);
}

::selection { background: var(--selection-bg); }