/* =====================================================================
   Italia In Bocca RD — tokens del sistema de diseño

   Dirección: editorial nocturna. Base espresso con grano de papel, serif
   variable de titular con eje WONK, y mono para precios y numeración.
   La idea es que parezca una revista gastronómica, no una plantilla.

   Los colores de marca se pueden sobrescribir desde /admin/ajustes: el
   layout imprime un <style> con las custom properties guardadas.
   ===================================================================== */

:root {
  /* ---------------- Base ---------------- */
  --ink:          #0E0B09;   /* espresso casi negro */
  --ink-soft:     #17110D;
  --ink-raised:   #211A15;   /* tarjetas sobre el fondo */
  --ink-line:     #2E2621;

  --paper:        #F7F1E6;   /* papel cálido */
  --paper-dim:    #C9BCA9;
  --paper-mute:   #8F8375;

  /* ---------------- Marca ---------------- */
  --terra:        #C4562F;   /* terracota saturada */
  --terra-deep:   #93381A;
  --basil:        #4F6B3A;
  --amber:        #E9A020;
  --tomato:       #D8371F;
  --cream:        #FFF8EC;

  /* ---------------- Semánticos ---------------- */
  --bg:           var(--ink);
  --fg:           var(--paper);
  --accent:       var(--terra);
  --accent-2:     var(--amber);
  --accent-3:     var(--basil);

  --success:      #5B8C3E;
  --warning:      var(--amber);
  --danger:       #C0392B;
  --info:         #3E6B8C;

  /* ---------------- Tipografía ---------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Ejes de Fraunces. WONK descuadra ligeramente las letras: es la firma
     del titular y lo que evita que parezca una serif genérica. */
  --wonk-on:  'SOFT' 30, 'WONK' 1;
  --wonk-off: 'SOFT' 0,  'WONK' 0;

  /* Escala fluida de 320px a 1440px */
  --step--2: clamp(0.69rem, 0.66rem + 0.16vw, 0.79rem);
  --step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.33vw, 1.19rem);
  --step-1:  clamp(1.20rem, 1.09rem + 0.53vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.28rem + 0.80vw, 1.90rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.18vw, 2.40rem);
  --step-4:  clamp(2.07rem, 1.73rem + 1.70vw, 3.03rem);
  --step-5:  clamp(2.49rem, 2.00rem + 2.42vw, 3.82rem);
  --step-6:  clamp(2.99rem, 2.31rem + 3.40vw, 4.83rem);
  --step-7:  clamp(3.58rem, 2.63rem + 4.75vw, 6.10rem);

  --leading-tight: 0.95;
  --leading-snug:  1.15;
  --leading-body:  1.65;

  /* ---------------- Ritmo ---------------- */
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --measure:   68ch;
  --shell:     min(100% - (var(--gutter) * 2), 84rem);
  --shell-narrow: min(100% - (var(--gutter) * 2), 58rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* ---------------- Formas ---------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   28px;
  --radius-xl:   40px;
  --radius-pill: 999px;

  --border:       1px solid var(--ink-line);
  --border-warm:  1px solid rgb(247 241 230 / 0.14);

  /* ---------------- Sombra y elevación ---------------- */
  --shadow-sm:   0 2px 10px rgb(0 0 0 / 0.30);
  --shadow:      0 10px 30px -8px rgb(0 0 0 / 0.45);
  --shadow-lift: 0 18px 50px -12px rgb(0 0 0 / 0.55);
  --shadow-glow: 0 0 0 1px rgb(233 160 32 / 0.25), 0 16px 40px -12px rgb(196 86 47 / 0.35);

  /* ---------------- Movimiento ---------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast:   180ms;
  --normal: 320ms;
  --slow:   640ms;

  /* ---------------- Capas ---------------- */
  --z-grain:   1;
  --z-sticky:  50;
  --z-header:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  color-scheme: dark;
}

/* ---------------------------------------------------------------------
   Grano de papel. Una sola textura SVG reutilizada como pseudo-elemento
   fijo: cuesta menos que una imagen y no se repite visiblemente.
   --------------------------------------------------------------------- */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------
   El panel de administración invierte la base: fondo claro, densidad alta.
   --------------------------------------------------------------------- */
:root[data-admin] {
  --bg:        #F4F0E8;
  --fg:        #1B1512;
  --surface:   #FFFFFF;
  --surface-2: #FBF8F2;
  --line:      #E2D9CA;
  --line-soft: #EFE9DE;
  --muted:     #6F6355;

  color-scheme: light;
}

:root[data-admin][data-theme="dark"] {
  --bg:        #14100D;
  --fg:        #F2EBDF;
  --surface:   #1D1713;
  --surface-2: #241D18;
  --line:      #342B24;
  --line-soft: #2A231D;
  --muted:     #9E9183;

  color-scheme: dark;
}