/* ============================================================
   Megawash — Design Tokens
   Sistema de gestión de lavado de autos
   ============================================================
   All colors use OKLCH for perceptual uniformity.
   Light theme: "patio de lavado con luz de día"
   Dark theme:  "asfalto"
   ============================================================ */

/* ------------------------------------------------------------
   Light Theme (default)
   ------------------------------------------------------------ */
:root {

  /* --- Surface & Text ------------------------------------ */
  --color-fondo:           oklch(96.5% 0.004 240);   /* concrete            */
  --color-superficie:      oklch(100% 0 0);           /* white               */
  --color-tinta:           oklch(24% 0.012 250);      /* graphite – main text */
  --color-texto-sec:       oklch(48% 0.012 250);      /* secondary text      */
  --color-linea:           oklch(88% 0.006 250);      /* borders / lines     */

  /* --- Accent  "agua" ------------------------------------ */
  --color-acento:          oklch(54% 0.13 232);       /* primary buttons, links, focus */
  --color-acento-hover:    oklch(48% 0.13 232);       /* one step darker     */
  --color-acento-sutil:    oklch(92% 0.04 232);       /* very light accent bg */
  --color-sobre-acento:    oklch(100% 0 0);           /* text on accent      */

  /* --- Status colors (always paired with icon + text) ---- */
  --color-en_cola:         oklch(55% 0.01 250);       /* grey neutral        */
  --color-en_cola-bg:      oklch(94% 0.005 250);
  --color-en_cola-texto:   oklch(40% 0.01 250);       /* contrast >= 4.5:1   */

  --color-lavando:         oklch(54% 0.13 232);       /* blue agua           */
  --color-lavando-bg:      oklch(92% 0.04 232);
  --color-lavando-texto:   oklch(40% 0.13 232);

  --color-secado:          oklch(62% 0.1 195);        /* cyan / turquoise    */
  --color-secado-bg:       oklch(92% 0.04 195);
  --color-secado-texto:    oklch(40% 0.10 195);

  --color-listo:           oklch(55% 0.13 150);       /* green               */
  --color-listo-bg:        oklch(92% 0.04 150);
  --color-listo-texto:     oklch(39% 0.13 150);

  --color-entregado:       oklch(55% 0.01 250);       /* neutral muted       */
  --color-entregado-bg:    oklch(94% 0.005 250);
  --color-entregado-texto: oklch(40% 0.01 250);

  --color-cancelado:       oklch(55% 0.17 25);        /* red                 */
  --color-cancelado-bg:    oklch(92% 0.06 25);
  --color-cancelado-texto: oklch(40% 0.17 25);

  /* --- Semantic ------------------------------------------ */
  --color-peligro:         oklch(55% 0.17 25);
  --color-peligro-hover:   oklch(49% 0.17 25);
  --color-exito:           oklch(55% 0.13 150);
  --color-aviso:           oklch(65% 0.15 85);

  /* --- Spacing scale ------------------------------------- */
  --espacio-2xs:  0.25rem;   /*  4px */
  --espacio-xs:   0.5rem;    /*  8px */
  --espacio-sm:   0.75rem;   /* 12px */
  --espacio-md:   1rem;      /* 16px */
  --espacio-lg:   1.5rem;    /* 24px */
  --espacio-xl:   2rem;      /* 32px */
  --espacio-2xl:  3rem;      /* 48px */
  --espacio-3xl:  4rem;      /* 64px */

  /* --- Border radius ------------------------------------- */
  --radio-sm:    4px;
  --radio-md:    6px;
  --radio-lg:   10px;
  --radio-full: 9999px;

  /* --- Typography ---------------------------------------- */
  --fuente-titulo:  'Barlow Condensed', sans-serif;
  --fuente-texto:   'Barlow', sans-serif;

  --fuente-peso-normal: 400;
  --fuente-peso-medio:  500;
  --fuente-peso-semi:   600;
  --fuente-peso-bold:   700;

  --texto-xs:   0.75rem;   /* 12px */
  --texto-sm:   0.875rem;  /* 14px */
  --texto-base: 1rem;      /* 16px */
  --texto-lg:   1.125rem;  /* 18px */
  --texto-xl:   1.25rem;   /* 20px */
  --texto-2xl:  1.5rem;    /* 24px */
  --texto-3xl:  2rem;      /* 32px */

  /* --- Shadows (minimal) --------------------------------- */
  --sombra-sm:  0 1px  2px  oklch(0% 0 0 / 0.05);
  --sombra-md:  0 2px  8px  oklch(0% 0 0 / 0.08);
  --sombra-lg:  0 4px 16px  oklch(0% 0 0 / 0.1);

  /* --- Motion -------------------------------------------- */
  --dur-rapida: 120ms;
  --dur-normal: 200ms;
  --ease:       ease-out;
}


/* ------------------------------------------------------------
   Dark Theme — "asfalto"
   Applied explicitly via data attribute.
   ------------------------------------------------------------ */
[data-tema="oscuro"] {

  /* --- Surface & Text ------------------------------------ */
  --color-fondo:           oklch(19% 0.008 250);
  --color-superficie:      oklch(23% 0.009 250);
  --color-tinta:           oklch(90% 0.006 250);
  --color-texto-sec:       oklch(65% 0.008 250);
  --color-linea:           oklch(32% 0.01 250);

  /* --- Accent -------------------------------------------- */
  --color-acento:          oklch(70% 0.12 225);
  --color-acento-hover:    oklch(76% 0.12 225);
  --color-acento-sutil:    oklch(28% 0.03 225);
  --color-sobre-acento:    oklch(15% 0.01 250);

  /* --- Status backgrounds (darker variants) -------------- */
  --color-en_cola-bg:      oklch(27% 0.005 250);
  --color-en_cola-texto:   oklch(82% 0.01 250);
  --color-lavando-bg:      oklch(26% 0.03 232);
  --color-lavando-texto:   oklch(82% 0.10 232);
  --color-secado-bg:       oklch(26% 0.03 195);
  --color-secado-texto:    oklch(82% 0.09 195);
  --color-listo-bg:        oklch(26% 0.03 150);
  --color-listo-texto:     oklch(82% 0.11 150);
  --color-entregado-bg:    oklch(27% 0.005 250);
  --color-entregado-texto: oklch(82% 0.01 250);
  --color-cancelado-bg:    oklch(26% 0.04 25);
  --color-cancelado-texto: oklch(82% 0.13 25);

  /* --- Shadows (softer on dark) -------------------------- */
  --sombra-sm:  0 1px  2px  oklch(0% 0 0 / 0.2);
  --sombra-md:  0 2px  8px  oklch(0% 0 0 / 0.3);
  --sombra-lg:  0 4px 16px  oklch(0% 0 0 / 0.35);
}


/* ------------------------------------------------------------
   Auto Dark Theme
   Applies dark tokens when the OS prefers dark AND the user
   hasn't explicitly chosen a theme (no data-tema attribute).
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  html:not([data-tema]) {

    /* --- Surface & Text ---------------------------------- */
    --color-fondo:           oklch(19% 0.008 250);
    --color-superficie:      oklch(23% 0.009 250);
    --color-tinta:           oklch(90% 0.006 250);
    --color-texto-sec:       oklch(65% 0.008 250);
    --color-linea:           oklch(32% 0.01 250);

    /* --- Accent ------------------------------------------ */
    --color-acento:          oklch(70% 0.12 225);
    --color-acento-hover:    oklch(76% 0.12 225);
    --color-acento-sutil:    oklch(28% 0.03 225);
    --color-sobre-acento:    oklch(15% 0.01 250);

    /* --- Status backgrounds ------------------------------ */
    --color-en_cola-bg:      oklch(27% 0.005 250);
    --color-en_cola-texto:   oklch(82% 0.01 250);
    --color-lavando-bg:      oklch(26% 0.03 232);
    --color-lavando-texto:   oklch(82% 0.10 232);
    --color-secado-bg:       oklch(26% 0.03 195);
    --color-secado-texto:    oklch(82% 0.09 195);
    --color-listo-bg:        oklch(26% 0.03 150);
    --color-listo-texto:     oklch(82% 0.11 150);
    --color-entregado-bg:    oklch(27% 0.005 250);
    --color-entregado-texto: oklch(82% 0.01 250);
    --color-cancelado-bg:    oklch(26% 0.04 25);
    --color-cancelado-texto: oklch(82% 0.13 25);

    /* --- Shadows ----------------------------------------- */
    --sombra-sm:  0 1px  2px  oklch(0% 0 0 / 0.2);
    --sombra-md:  0 2px  8px  oklch(0% 0 0 / 0.3);
    --sombra-lg:  0 4px 16px  oklch(0% 0 0 / 0.35);
  }
}