/* ─────────────────────────────────────────────
   TOKENS DE DISEÑO — CocinarIA
   Única fuente de verdad para colores, tipografía,
   espaciado, sombras y capas z-index.
   ───────────────────────────────────────────── */

:root {

  /* ── Layout ──────────────────────────────── */
  --phone-max-width: 430px;
  --nav-h: 65px;
  --screen-padding: 20px;
  --fab-bottom: calc(var(--nav-h) + 16px);

  /* ── Z-index layers ──────────────────────── */
  --z-content: 10;
  --z-sticky: 15;
  --z-core-backdrop: 20;
  --z-core: 25;
  --z-overlay: 30;
  --z-bottom-sheet: 50;
  --z-toast: 60;

  /* ── Colores de marca ────────────────────── */
  --color-brand-primary: #3d5a40;
  --color-brand-primary-dark: #2a4030;
  --color-brand-primary-light: #6a8a6a;
  --color-brand-primary-soft: #eef5ee;

  --color-accent-terracotta: #c96f4a;
  --color-accent-terracotta-soft: #fdf0ea;

  --color-ai-golden: #d4a830;
  --color-ai-golden-dark: #b8860b;
  --color-ai-golden-soft: #fffbec;
  --color-ai-golden-border: rgba(212, 168, 48, 0.22);

  /* ── Fondos ──────────────────────────────── */
  --color-bg-app: #d9cfc4;
  --color-bg-surface: #faf7f2;
  --color-bg-elevated: #fff;
  --color-bg-muted: #f5f0e8;
  --color-bg-overlay-dark: rgba(12, 10, 7, 0.46);

  /* ── Cook mode (pantalla oscura) ─────────── */
  --color-bg-cook: #1a1f1e;
  --color-cook-text-primary: var(--color-text-inverse);
  --color-cook-text-muted: rgba(245, 240, 232, 0.68);
  --color-cook-step-num: rgba(201, 111, 74, 0.22);
  --color-cook-ctrl: rgba(255, 255, 255, 0.1);
  --color-cook-card: rgba(255, 255, 255, 0.055);
  --color-cook-card-label: rgba(255, 255, 255, 0.3);
  --color-cook-ai-bg: rgba(212, 168, 48, 0.2);
  --color-cook-timer-bg: rgba(201, 111, 74, 0.18);
  --color-cook-timer-border: rgba(201, 111, 74, 0.4);
  --color-cook-dot-active: var(--color-accent-terracotta);
  --color-cook-dot-inactive: rgba(255, 255, 255, 0.2);
  --color-cook-badge-border: #1a1f1e;

  /* ── Textos ──────────────────────────────── */
  --color-text-primary: #1c1a17;
  --color-text-secondary: #4a443c;
  --color-text-muted: #7a6f62;
  --color-text-subtle: #9e9590;
  --color-text-inverse: #f5f0e8;
  --color-text-brand: #3d5a40;
  --color-text-ai: #7a5a0a;

  /* ── Bordes ──────────────────────────────── */
  --color-border-subtle: rgba(0, 0, 0, 0.06);
  --color-border-medium: rgba(0, 0, 0, 0.1);

  /* ── Tipografía ──────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', sans-serif;

  /* ── Tamaños de texto ────────────────────── */
  --text-display-xl: 52px;
  --text-display-lg: 32px;
  --text-display-md: 26px;
  --text-heading-lg: 20px;
  --text-heading-md: 18px;
  --text-heading-sm: 16px;
  --text-body-lg: 15px;
  --text-body-md: 14px;
  --text-body-sm: 13px;
  --text-label-lg: 13px;
  --text-label-md: 12px;
  --text-label-sm: 11px;
  --text-caption: 10px;

  /* ── Pesos de fuente ─────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ── Interlineado ────────────────────────── */
  --lh-tight: 1;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --lh-relaxed: 1.65;

  /* ── Espaciado entre letras ──────────────── */
  --ls-tight: -0.02em;
  --ls-wide: 0.07em;

  /* ── Espaciado ───────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Radios de borde ─────────────────────── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 18px;
  --radius-2xl: 20px;
  --radius-card: 20px;
  --radius-chip: 50px;
  --radius-circle: 50%;

  /* ── Sombras ─────────────────────────────── */
  --shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.1);
  --shadow-brand: 0 4px 16px rgba(61, 90, 64, 0.35);
  --shadow-ai: 0 4px 14px rgba(212, 168, 48, 0.35);

  /* ── Dimensiones de controles ────────────── */
  --touch-min: 48px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --ctrl-sm: 36px;
  --ctrl-md: 42px;
  --ctrl-lg: 48px;
  --ctrl-fab: 58px;

  /* ── Movimiento ──────────────────────────── */
  --duration-fast: 200ms;
  --duration-standard: 300ms;
  --duration-slow: 500ms;
  --ease-standard: ease;
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Gradientes ──────────────────────────── */
  --gradient-hero: linear-gradient(150deg, #2a4030 0%, #3d5a40 55%, #6a8a6a 100%);
}