/* ============================================================
   Pizca Isarelli — Design Tokens
   ============================================================ */

@layer tokens {

:root {
  /* --- Colores base --- */
  --color-papel:       #FAF5EA;
  --color-tinta:       #2B2118;
  --color-tinta-suave: #5A4A3A;
  --color-terracota:   #C65D3B;
  --color-terracota-d: #A34A2B;
  --color-oliva:       #6B7A3A;
  --color-oliva-d:     #566030;
  --color-mostaza:     #E0A526;
  --color-mostaza-d:   #B8841A;
  --color-crema:       #F0E8D0;
  --color-crema-d:     #DDD0B0;
  --color-borde:       rgba(43, 33, 24, 0.12);
  --color-borde-suave: rgba(43, 33, 24, 0.07);

  /* --- Superficies --- */
  --surface-bg:      var(--color-papel);
  --surface-card:    #FFFDF7;
  --surface-muted:   #F3EBD8;
  --surface-overlay: rgba(43, 33, 24, 0.04);

  /* --- Texto --- */
  --text-primary:   var(--color-tinta);
  --text-secondary: var(--color-tinta-suave);
  --text-muted:     #8C7A68;
  --text-inverse:   #FAF5EA;
  --text-link:      var(--color-terracota);
  --text-link-hover:var(--color-terracota-d);

  /* --- Tipografía --- */
  --font-title: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* Escala fluida (clamp: min, preferred, max) */
  --text-xs:   clamp(0.70rem,  0.65rem + 0.25vw, 0.78rem);
  --text-sm:   clamp(0.83rem,  0.78rem + 0.28vw, 0.95rem);
  --text-base: clamp(1.00rem,  0.95rem + 0.25vw, 1.10rem);
  --text-md:   clamp(1.10rem,  1.00rem + 0.5vw,  1.25rem);
  --text-lg:   clamp(1.20rem,  1.05rem + 0.75vw, 1.50rem);
  --text-xl:   clamp(1.40rem,  1.10rem + 1.5vw,  2.00rem);
  --text-2xl:  clamp(1.70rem,  1.20rem + 2.5vw,  2.70rem);
  --text-3xl:  clamp(2.00rem,  1.30rem + 3.5vw,  3.50rem);
  --text-4xl:  clamp(2.50rem,  1.50rem + 5vw,    5.00rem);
  --text-hero: clamp(3.00rem,  2.00rem + 5vw,    7.00rem);

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* --- Espaciado --- */
  --space-1:  0.25rem;
  --space-2:  0.50rem;
  --space-3:  0.75rem;
  --space-4:  1.00rem;
  --space-5:  1.25rem;
  --space-6:  1.50rem;
  --space-8:  2.00rem;
  --space-10: 2.50rem;
  --space-12: 3.00rem;
  --space-16: 4.00rem;
  --space-20: 5.00rem;
  --space-24: 6.00rem;
  --space-32: 8.00rem;

  /* Gutter lateral responsivo */
  --gutter: clamp(1rem, 4vw, 2rem);

  /* --- Bordes y radios --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border:       var(--border-width) solid var(--color-borde);

  /* --- Sombras --- */
  --shadow-sm:  0 1px  3px rgba(43,33,24,0.08);
  --shadow-md:  0 4px 12px rgba(43,33,24,0.10);
  --shadow-lg:  0 8px 24px rgba(43,33,24,0.12);
  --shadow-xl:  0 16px 48px rgba(43,33,24,0.14);

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

  /* --- Layout --- */
  --max-width:         1280px;
  --max-width-text:    680px;
  --max-width-wide:    1440px;
  --header-height:     64px;
  --header-height-mob: 56px;

  /* --- Z-indexes --- */
  --z-base:    0;
  --z-card:    10;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;
}

/* ---- Modo oscuro automático ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-papel:       #17130F;
    --color-tinta:       #EDE0CB;
    --color-tinta-suave: #C4AE92;
    --color-terracota:   #D9714E;
    --color-terracota-d: #B85A38;
    --color-oliva:       #8A9A50;
    --color-oliva-d:     #7A8A42;
    --color-mostaza:     #E8B040;
    --color-mostaza-d:   #C89030;
    --color-crema:       #2A2018;
    --color-crema-d:     #1E1610;
    --color-borde:       rgba(237, 224, 203, 0.12);
    --color-borde-suave: rgba(237, 224, 203, 0.07);

    --surface-bg:      #17130F;
    --surface-card:    #1E180E;
    --surface-muted:   #261E12;
    --surface-overlay: rgba(237, 224, 203, 0.04);

    --text-primary:   #EDE0CB;
    --text-secondary: #C4AE92;
    --text-muted:     #8C7A68;
    --text-inverse:   #2B2118;
    --text-link:      var(--color-terracota);

    --shadow-sm:  0 1px  3px rgba(0,0,0,0.3);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
    --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
  }
}

:root[data-theme="dark"] {
  --color-papel:       #17130F;
  --color-tinta:       #EDE0CB;
  --color-tinta-suave: #C4AE92;
  --color-terracota:   #D9714E;
  --color-terracota-d: #B85A38;
  --color-oliva:       #8A9A50;
  --color-oliva-d:     #7A8A42;
  --color-mostaza:     #E8B040;
  --color-mostaza-d:   #C89030;
  --color-crema:       #2A2018;
  --color-crema-d:     #1E1610;
  --color-borde:       rgba(237, 224, 203, 0.12);
  --color-borde-suave: rgba(237, 224, 203, 0.07);

  --surface-bg:      #17130F;
  --surface-card:    #1E180E;
  --surface-muted:   #261E12;
  --surface-overlay: rgba(237, 224, 203, 0.04);

  --text-primary:   #EDE0CB;
  --text-secondary: #C4AE92;
  --text-muted:     #8C7A68;
  --text-inverse:   #2B2118;
  --text-link:      var(--color-terracota);

  --shadow-sm:  0 1px  3px rgba(0,0,0,0.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.6);
}

} /* @layer tokens */