/* =====================================================================
   CESTY — Design Tokens v1.0
   ---------------------------------------------------------------------
   Capa 1 · Primitivos   → paleta cruda. NUNCA se usan en componentes.
   Capa 2 · Semánticos   → roles (bg, text, brand, ok…). Lo que usa la UI.
   Capa 3 · Componente   → tank, ticket, cesti… overrides puntuales.
   Temas: [data-theme="fresco" | "oscuro"] · claro y oscuro de una misma marca
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&family=Figtree:wght@400..800&display=swap');

:root {
  /* ─────────────────────────── 1 · PRIMITIVOS ─────────────────────────── */

  /* Coral · marca. Nace de la barra de la "E" del logo (#FF4D3D) */
  --coral-50:  #FFF1EF;
  --coral-100: #FFDDD8;
  --coral-200: #FFB9AF;
  --coral-300: #FF8F80;
  --coral-400: #FF6A5A;
  --coral-500: #FF4D3D;
  --coral-600: #E8392A;
  --coral-700: #C02A1E;
  --coral-800: #8F2018;
  --coral-900: #5C1611;

  /* Tinta · el negro cálido del logo (#141412) y sus cremas */
  --ink-0:   #FFFFFF;
  --ink-25:  #FBFAF7;
  --ink-50:  #F6F3EE;
  --ink-100: #ECE8E1;
  --ink-200: #DAD5CC;
  --ink-300: #BDB7AC;
  --ink-400: #96918A;
  --ink-500: #6E6A64;
  --ink-600: #4F4C47;
  --ink-700: #34322F;
  --ink-800: #22211F;
  --ink-900: #141412;
  --ink-950: #0B0B0A;

  /* Albahaca · "vas bien" y hecho */
  --basil-50:  #ECFBF3;
  --basil-100: #D7F7E6;
  --basil-300: #7FE3B0;
  --basil-400: #3DD68C;
  --basil-500: #22C17A;
  --basil-600: #14A365;
  --basil-800: #0B5E3B;

  /* Azafrán · atención */
  --saffron-100: #FFF0C7;
  --saffron-300: #FFD66B;
  --saffron-400: #FFC23D;
  --saffron-500: #FFB21E;
  --saffron-700: #8A5A00;

  /* Granada · exceso. Deliberadamente distinto del coral */
  --pom-100: #FFD9DF;
  --pom-400: #F0415F;
  --pom-500: #E0264A;
  --pom-700: #A3132F;

  /* Lila · social, compartir, foco */
  --lilac-100: #EEE8FF;
  --lilac-300: #C7B8FF;
  --lilac-500: #8F72FF;
  --lilac-700: #5A3FD1;

  /* Mantequilla · ilustración, celebración */
  --butter-100: #FFF6D6;
  --butter-300: #FFE27A;
  --butter-500: #FFD23F;

  /* Cielo · solo ilustración (gota de sudor de Cesti, lácteos) */
  --sky-300: #8BD3FF;

  /* ─────────────────────────── ESCALAS NO CROMÁTICAS ─────────────────────────── */

  /* Espaciado · base 4 pt */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --gutter: 20px;          /* margen lateral de pantalla */

  /* Objetivos táctiles (una mano, todas las edades) */
  --tap-min: 48px;
  --tap-primary: 56px;
  --tap-hero: 64px;

  /* Tipografía · escala móvil (px reales a 1x, escalan con Dynamic Type) */
  --fs-hero: 64px;      /* total del depósito */
  --fs-display: 40px;
  --fs-h1: 30px;
  --fs-h2: 24px;
  --fs-h3: 20px;
  --fs-body-lg: 18px;
  --fs-body: 16px;      /* mínimo para texto de lectura */
  --fs-label: 14px;
  --fs-caption: 12px;   /* solo metadatos, nunca información crítica */
  --lh-tight: 1.02;
  --lh-snug: 1.18;
  --lh-body: 1.45;

  /* Radios */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ─────────────────────────── MOTION ─────────────────────────── */
  --dur-instant: 90ms;     /* feedback de pulsación */
  --dur-fast: 160ms;       /* hover, toggles, opacidad */
  --dur-base: 240ms;       /* entradas de elementos pequeños */
  --dur-slow: 400ms;       /* hojas, cambios de pantalla */
  --dur-deliberate: 640ms; /* vuelo del precio al depósito */
  --dur-story: 1100ms;     /* oleaje, celebraciones, impresión del ticket */
  --stagger: 40ms;

  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-exit: cubic-bezier(.3, 0, .8, .15);
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  /* Muelle ágil: botones, chips, filas que entran */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.103, 1.085 31.2%, 1.018 38.5%, 0.996 42.6%, 0.988 46.7%, 0.991 53%, 1.001 66.8%, 1);
  /* Muelle pesado: el líquido del depósito (masa, inercia) */
  --ease-spring-soft: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  /* Elástico: solo Cesti y celebraciones */
  --ease-elastic: linear(0, 0.218 2.1%, 0.862 6.5%, 1.114, 1.296 10.7%, 1.346, 1.37 12.9%, 1.373, 1.364 14.5%, 1.315 16.2%, 1.032 21.8%, 0.941 24%, 0.891 25.9%, 0.877, 0.869 27.8%, 0.87, 0.882 30.7%, 0.907 32.4%, 0.991 36.6%, 1.026 39.1%, 1.032 41.5%, 1.028 43.8%, 1.006 48.1%, 0.995 52%, 0.998 59.6%, 1.001 66.8%, 1);

  /* Capas */
  --z-base: 0;
  --z-raised: 10;
  --z-sheet: 40;
  --z-toast: 60;
  --z-overlay: 80;
}

/* ===================================================================
   2 · SEMÁNTICOS — TEMA FRESCO (claro)
   =================================================================== */
:root,
[data-theme="fresco"] {
  color-scheme: light;

  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-ui: "Figtree", system-ui, sans-serif;
  --display-weight: 700;
  --display-tracking: -0.035em;
  --display-scale: 1;

  --bg: var(--ink-50);
  --bg-accent: var(--coral-50);
  --surface: var(--ink-0);
  --surface-2: var(--ink-25);
  --surface-sunken: var(--ink-100);
  --surface-inverse: var(--ink-900);
  --border: rgba(20, 20, 18, .08);
  --border-strong: rgba(20, 20, 18, .16);

  --text: var(--ink-900);
  --text-2: var(--ink-600);
  --text-3: var(--ink-400);
  --text-inverse: var(--ink-25);

  --brand: var(--coral-500);
  --brand-press: var(--coral-600);
  --brand-soft: var(--coral-50);
  --brand-strong: var(--coral-700);
  --on-brand: var(--ink-900);        /* regla: sobre coral, siempre tinta */

  --accent: var(--lilac-500);
  --accent-soft: var(--lilac-100);
  --highlight: var(--butter-500);

  --ok: var(--basil-500);
  --ok-soft: var(--basil-100);
  --ok-ink: var(--basil-800);
  --warn: var(--saffron-500);
  --warn-soft: var(--saffron-100);
  --warn-ink: var(--saffron-700);
  --over: var(--pom-500);
  --over-soft: var(--pom-100);
  --over-ink: var(--pom-700);
  /* Hecho: añadido, tachado, confirmado (antes "--save") */
  --done: var(--basil-600);
  --done-soft: var(--basil-100);
  --done-ink: var(--basil-800);
  --on-done: var(--ink-0);
  --focus: var(--lilac-500);

  --shadow-1: 0 1px 2px rgba(20, 20, 18, .05), 0 2px 8px rgba(20, 20, 18, .04);
  --shadow-2: 0 10px 28px -10px rgba(20, 20, 18, .18), 0 2px 6px rgba(20, 20, 18, .05);
  --shadow-3: 0 28px 56px -16px rgba(20, 20, 18, .28);
  --shadow-brand: 0 12px 24px -10px rgba(255, 77, 61, .65);

  /* Escanear = "adelante". Coral es marca; el rojo/coral se lee como STOP,
     así que la acción de entrar al escáner usa albahaca brillante. */
  --scan: var(--basil-400);
  --scan-press: var(--basil-500);
  --scan-soft: var(--basil-100);
  --on-scan: var(--ink-900);
  --shadow-scan: 0 14px 26px -10px rgba(34, 193, 122, .75);

  /* Forma */
  --radius-card: 24px;
  --radius-control: 16px;
  --radius-chip: 999px;
  --radius-tile: 14px;
  --cut-brand: 14px;      /* el corte del logo: depósito, escáner, ticket */
  --radius-cut: 4px;      /* radio residual de los elementos con corte */
  --cut-card: 0px;        /* tarjetas normales sin corte */

  /* 3 · COMPONENTE: depósito */
  --tank-bg: var(--ink-0);
  --tank-text: var(--ink-900);
  --tank-ok: var(--basil-400);
  --tank-warn: var(--saffron-400);
  --tank-over: var(--pom-500);
  --liquid-opacity: 1;
  --liquid-line-opacity: 0;
  --tank-mark: rgba(20, 20, 18, .28);

  /* Temporada: lo que cae o sube dentro del depósito según la fecha (nunca el líquido,
     que es el estado). 1 y 2 son las piezas; 3, el detalle o la luz. */
  --season-autumn-1: var(--saffron-400);
  --season-autumn-2: var(--coral-400);
  --season-autumn-3: var(--saffron-700);
  --season-winter-1: var(--sky-300);
  --season-winter-2: var(--ink-200);
  --season-spring-1: var(--coral-200);
  --season-spring-2: var(--butter-300);
  --season-summer-1: var(--butter-500);
  --season-summer-2: var(--ink-0);
  --season-spooky-1: var(--ink-800);
  --season-spooky-2: var(--saffron-500);
  --season-xmas-1: var(--pom-400);
  --season-xmas-2: var(--butter-500);
  --season-xmas-3: var(--basil-500);
  --season-love-1: var(--pom-400);
  --season-love-2: var(--coral-300);
  /* El aire del depósito se tiñe de la temporada (de arriba hacia el líquido) */
  --season-autumn-tint: rgba(255, 178, 30, .26);
  --season-winter-tint: rgba(139, 211, 255, .34);
  --season-spring-tint: rgba(255, 185, 175, .34);
  --season-summer-tint: rgba(255, 210, 63, .3);
  --season-spooky-tint: rgba(143, 114, 255, .22);
  --season-xmas-tint: rgba(240, 65, 95, .14);
  --season-love-tint: rgba(255, 143, 128, .26);

  /* Ticket */
  --ticket-bg: var(--ink-0);
  --ticket-ink: var(--ink-900);

  /* Cesti */
  --cesti-body: var(--coral-500);
  --cesti-mesh: var(--coral-800);
  --cesti-ink: var(--ink-900);
  --cesti-line: var(--ink-900);
  --cesti-hub: var(--ink-50);
  --cesti-item-1: var(--butter-500);
  --cesti-item-2: var(--sky-300);
  --cesti-item-3: var(--basil-400);   /* el brik (cesta llena) */
  --cesti-cheek: #FF9C8F;
  --cesti-shadow: rgba(20, 20, 18, .14);

  /* Ilustración de fondo */
  --blob: var(--coral-100);
  --blob-2: var(--butter-300);
}

/* ===================================================================
   FRESCO OSCURO
   Misma forma, misma tipografía, mismo carácter: solo cambia la luz.
   Hereda radios, cortes y fuentes de Fresco; aquí van colores, sombras
   y el depósito (líquido translúcido con borde luminoso: un color sólido
   brillante sobre fondo oscuro deslumbra y se come la cifra).
   =================================================================== */
[data-theme="oscuro"] {
  color-scheme: dark;

  --bg: #121110;
  --bg-accent: #1E1412;
  --surface: #1C1A18;
  --surface-2: #232120;
  --surface-sunken: #2A2724;
  --surface-inverse: #F5F2EC;
  --border: rgba(255, 250, 240, .08);
  --border-strong: rgba(255, 250, 240, .16);

  --text: #F5F2EC;
  --text-2: #B8B1A6;
  --text-3: #7E786F;
  --text-inverse: var(--ink-900);

  --brand: #FF5A4A;
  --brand-press: #FF7062;
  --brand-soft: rgba(255, 90, 74, .14);
  --brand-strong: #FF8F80;
  --on-brand: var(--ink-900);

  --accent: #A994FF;
  --accent-soft: rgba(169, 148, 255, .16);

  --ok: #3BE39A;
  --ok-soft: rgba(59, 227, 154, .14);
  --ok-ink: #7CF0BE;
  --warn: #FFC53D;
  --warn-soft: rgba(255, 197, 61, .14);
  --warn-ink: #FFD878;
  --over: #FF4668;
  --over-soft: rgba(255, 70, 104, .16);
  --over-ink: #FF8FA4;
  --done: #3BE39A;
  --done-soft: rgba(59, 227, 154, .14);
  --done-ink: #7CF0BE;
  --on-done: var(--ink-900);
  --focus: #A994FF;

  /* Sombras: en oscuro la profundidad la da un filo de luz, no una mancha negra */
  --shadow-1: 0 0 0 1px rgba(255, 250, 240, .05);
  --shadow-2: 0 0 0 1px rgba(255, 250, 240, .06), 0 18px 40px -18px rgba(0, 0, 0, .7);
  --shadow-3: 0 0 0 1px rgba(255, 250, 240, .07), 0 30px 60px -20px rgba(0, 0, 0, .8);
  --shadow-brand: 0 12px 28px -12px rgba(255, 90, 74, .55);

  --scan: #3BE39A;
  --scan-press: #6CF0B8;
  --scan-soft: rgba(59, 227, 154, .14);
  --on-scan: var(--ink-900);
  --shadow-scan: 0 12px 28px -12px rgba(59, 227, 154, .45);

  --tank-bg: var(--surface);
  --tank-text: #F5F2EC;
  --tank-ok: #3BE39A;
  --tank-warn: #FFC53D;
  --tank-over: #FF4668;
  --liquid-opacity: .28;
  --liquid-line-opacity: 1;
  --tank-mark: rgba(255, 250, 240, .22);

  --season-autumn-3: var(--saffron-300);
  --season-winter-2: #F5F2EC;
  --season-summer-2: rgba(255, 250, 240, .7);
  --season-spooky-1: #F5F2EC;
  --season-autumn-tint: rgba(255, 178, 30, .16);
  --season-winter-tint: rgba(139, 211, 255, .18);
  --season-spring-tint: rgba(255, 143, 128, .16);
  --season-summer-tint: rgba(255, 210, 63, .16);
  --season-spooky-tint: rgba(169, 148, 255, .2);
  --season-xmas-tint: rgba(255, 70, 104, .14);
  --season-love-tint: rgba(255, 143, 164, .18);

  --ticket-bg: #F5F2EC;
  --ticket-ink: var(--ink-900);

  --cesti-body: #FF5A4A;
  --cesti-line: #F5F2EC;
  --cesti-hub: var(--ink-900);
  --cesti-cheek: #FFA699;
  --cesti-shadow: rgba(0, 0, 0, .5);

  --blob: rgba(255, 90, 74, .2);
  --blob-2: rgba(255, 210, 63, .16);
}

/* Movimiento reducido: se conservan los cambios de estado, se eliminan los recorridos */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-deliberate: 1ms;
    --dur-story: 1ms;
    --stagger: 0ms;
  }
}