/* YogiBear · tokens (OKLCH) */
:root {
  /* brand */
  --brand:        oklch(0.70 0.19 50);
  --brand-strong: oklch(0.64 0.22 42);
  --brand-deep:   oklch(0.48 0.20 38);
  --brand-soft:   oklch(0.88 0.10 70);
  --brand-cream:  oklch(0.915 0.08 78);
  --brand-danger: oklch(0.58 0.22 25);
  --on-brand:     oklch(0.99 0.005 75);

  /* light theme (cálido, identidad naranja marcada, limpio) */
  --bg:        oklch(0.965 0.035 76);
  --surface:   oklch(0.925 0.05 74);
  --surface-2: oklch(0.88 0.065 72);
  --ink:       oklch(0.24 0.035 45);
  --ink-muted: oklch(0.46 0.04 50);
  --border:    oklch(0.83 0.055 70);
  --shadow-sm: 0 1px 2px oklch(0.18 0.02 50 / 0.06), 0 2px 6px -2px oklch(0.18 0.02 50 / 0.08);
  --shadow-md: 0 1px 2px oklch(0.18 0.02 50 / 0.05), 0 8px 20px -6px oklch(0.18 0.02 50 / 0.10), 0 18px 40px -16px oklch(0.18 0.02 50 / 0.12);
  --shadow-lg: 0 2px 4px oklch(0.18 0.02 50 / 0.06), 0 18px 36px -10px oklch(0.18 0.02 50 / 0.16), 0 40px 80px -32px oklch(0.18 0.02 50 / 0.22);
  --shadow-brand: 0 16px 40px -12px oklch(0.64 0.22 42 / 0.5), 0 4px 12px -4px oklch(0.64 0.22 42 / 0.35);

  /* type */
  --font-display: 'Anton', 'Bebas Neue', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  --fs-xs: 0.75rem;  --fs-sm: 0.875rem;  --fs-md: 1rem;
  --fs-lg: 1.333rem; --fs-xl: 1.777rem;
  --fs-2xl: 2.369rem; --fs-3xl: 3.157rem; --fs-4xl: clamp(3rem, 9vw, 5.61rem);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* curvas fuertes (Emil Kowalski) — las de CSS son demasiado débiles */
  --ease: cubic-bezier(0.23, 1, 0.32, 1);          /* ease-out fuerte para UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento en pantalla */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);   /* curva tipo iOS para drawers */
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-press: 130ms;
  --t-fast: 160ms;
  --t-base: 220ms;
  --t-slow: 400ms;

  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 20px;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-top: env(safe-area-inset-top, 0px);
}

[data-theme="dark"] {
  --bg:        oklch(0.16 0.014 50);
  --surface:   oklch(0.21 0.017 50);
  --surface-2: oklch(0.27 0.020 50);
  --ink:       oklch(0.96 0.008 75);
  --ink-muted: oklch(0.72 0.014 60);
  --border:    oklch(0.32 0.020 50);
  --brand-cream: oklch(0.30 0.06 55);
  --shadow-sm: 0 1px 2px oklch(0.04 0.01 50 / 0.5);
  --shadow-md: 0 2px 6px oklch(0.04 0.01 50 / 0.5), 0 14px 34px -10px oklch(0.04 0.01 50 / 0.6);
  --shadow-lg: 0 8px 20px oklch(0.04 0.01 50 / 0.55), 0 40px 80px -28px oklch(0.04 0.01 50 / 0.7);
  --shadow-brand: 0 16px 50px -10px oklch(0.70 0.19 50 / 0.55);
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}