/* ==========================================================================
   TOKENS — la única fuente de verdad visual. No usar valores sueltos
   en components/layout; referenciar estas variables.
   ========================================================================== */

:root {
  /* Color de marca — valores exactos del flyer, no aproximar */
  --ink:            #1A1614;
  --ink-soft:       #3C3530;
  --muted:          #6E655C;
  --paper:          #F3EDE4;
  --paper-2:        #E8DFD2;
  --stone:          #D9CFC2;
  --stone-dark:     #B7AA9A;
  --void:           #0E0C0B;
  --void-2:         #161311;
  --seal:           #8E1D2A;
  --seal-deep:      #6C1520;
  --seal-soft:      #C44B57;
  --gold:           #C4A574;
  --gold-dim:       #A6895A;
  --line:           rgba(26, 22, 20, 0.12);
  --line-on-dark:   rgba(243, 237, 228, 0.16);
  --ok:             #2F6B4F;
  --whatsapp:       #128C7E;

  /* Tipografía */
  --font-display: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;
  --font-ui: "Figtree", "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-display-xl: clamp(2.5rem, 1.6rem + 4.2vw, 5.5rem);
  --fs-h1:         clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h2:         clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-h3:         clamp(1.15rem, 1.05rem + 0.4vw, 1.5rem);
  --fs-body:       1rem;
  --fs-body-lg:    1.125rem;
  --fs-small:      0.8125rem;
  --fs-price:      1.375rem;

  --tracking-label: 0.16em;
  --tracking-caps-sm: 0.06em;
  --tracking-caps-lg: 0.14em;

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

  --gutter: 20px;
  --content-max: 1120px;

  /* Radios — lujo = casi sin radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-fab: 999px;

  /* Bordes */
  --border-hairline: 1px solid var(--line);
  --border-hairline-dark: 1px solid var(--line-on-dark);

  /* Motion */
  --ease-soberano: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 420ms;
  --dur-slower: 700ms;

  /* Sombra de objeto fotográfico — nunca genérica en cards planas */
  --shadow-lift: 0 18px 30px -18px rgba(26, 22, 20, 0.35);
  --shadow-panel: -24px 0 48px -24px rgba(14, 12, 11, 0.45);

  /* z-index */
  --z-header: 50;
  --z-fab: 60;
  --z-bottomnav: 55;
  --z-overlay: 80;
  --z-panel: 90;
  --z-preloader: 100;

  color-scheme: light;
}

[data-theme="dark"] {
  --ink: #F3EDE4;
  --ink-soft: #E8DFD2;
  --muted: #B7AA9A;
  --paper: #14110F;
  --paper-2: #0E0C0B;
  --stone: #211C19;
  --stone-dark: #2A2320;
  --line: rgba(243, 237, 228, 0.14);
  --line-on-dark: rgba(243, 237, 228, 0.16);
  color-scheme: dark;
}