/* =====================================================================
   TU TIENDITA — TOKENS DE DISEÑO
   ---------------------------------------------------------------------
   ÚNICO lugar donde viven los colores, tipografías, espacios, radios y
   sombras. Para cambiar la marca basta con editar este archivo (o los
   dos colores principales desde Panel → Configuración).

   Paleta extraída del logotipo oficial (muestreo de píxeles):
     azul del wordmark ≈ #0C78B4 · celeste del techo ≈ #78C8DC
     naranja de la casa ≈ #F08424 · amarillo de globo/toldo ≈ #F0B01C
     verde de flor/regalo ≈ #90C060 · rojo de globo ≈ #E85C5C
     violeta de la puerta ≈ #A060AC · contorno ≈ #2C4860
   Los tonos "-ink" (texto) son versiones oscurecidas para cumplir contraste
   AA (≥ 4.5:1) sobre su fondo suave. Se verifican con
   tests/standalone/branding.php
   ===================================================================== */

/* Tipografía autoalojada (Poppins, licencia OFL; ver public/fonts/OFL.txt) */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/poppins-400.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/poppins-500.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/poppins-700.woff") format("woff"); }

:root {
    /* ---------- Marca ---------- */
    --brand: #0e76b0;            /* Azul Tiendita: acciones principales, enlaces, títulos de marca */
    --brand-dark: #0a5a87;       /* Azul profundo: hover, texto de marca sobre fondos suaves */
    --brand-soft: #e6f4fb;       /* Celeste muy claro: fondos de selección, encabezados de tabla */
    --accent: #f08424;           /* Naranja casita: llamada a la acción (agregar, enviar) */
    --accent-dark: #c9650c;      /* Naranja oscuro: hover del acento y bordes */
    --accent-soft: #fff1de;      /* Crema anaranjado: avisos amables, destacados */

    /* ---------- Colores secundarios del logotipo (decorativos y de estado) ---------- */
    --sky: #78c8dc;              /* Celeste del techo */
    --sun: #f0b01c;              /* Amarillo del toldo y los globos */
    --leaf: #90c060;             /* Verde de la flor */
    --berry: #e85c5c;            /* Rojo del globo */
    --plum: #a060ac;             /* Violeta de la puerta */

    /* ---------- Superficies y texto ---------- */
    --bg: #f6fafd;               /* Fondo de página */
    --surface: #ffffff;          /* Tarjetas, formularios, tablas */
    --surface-alt: #eef6fa;      /* Zonas secundarias */
    --border: #d6e4ed;           /* Bordes y separadores */
    --border-strong: #b4cbda;    /* Bordes de campos de formulario */
    --ink: #1f3447;              /* Texto principal (azul noche del contorno del logo) */
    --muted: #4f6578;            /* Texto secundario */
    --on-brand: #ffffff;         /* Texto sobre --brand y --danger */
    --on-accent: #1f3447;        /* Texto sobre --accent (el blanco no alcanza contraste) */

    /* ---------- Estados (fondo suave + texto oscuro + color sólido) ---------- */
    --success: #3c7a2b;
    --success-soft: #eaf5e0;
    --success-ink: #2c5c1f;
    --warning: #b27800;
    --warning-soft: #fff6d6;
    --warning-ink: #6e4a00;
    --danger: #c93a3a;
    --danger-soft: #fdecec;
    --danger-ink: #8f2222;
    --info: #0e76b0;
    --info-soft: #e6f4fb;
    --info-ink: #0a4f78;
    --neutral-soft: #e9eef2;
    --neutral-ink: #3f5365;
    --plum-soft: #f4e9f6;
    --plum-ink: #6d3a78;
    --whatsapp: #167a40;         /* Verde WhatsApp, oscurecido para contraste con texto blanco */

    /* ---------- Tipografía ---------- */
    --font: "Poppins", ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-xs: .78rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2.15rem;
    --lh-tight: 1.2;
    --lh-body: 1.6;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-bold: 700;

    /* ---------- Espacios, radios, sombras ---------- */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-sm: 8px;
    --radius: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgb(31 52 71 / .08), 0 2px 8px rgb(31 52 71 / .05);
    --shadow-md: 0 2px 6px rgb(31 52 71 / .08), 0 10px 24px rgb(31 52 71 / .08);
    --overlay: rgb(31 52 71 / .55);
    --focus-ring: 0 0 0 3px var(--accent-soft), 0 0 0 5px var(--accent);

    /* ---------- Medidas ---------- */
    --container: 1120px;
    --tap: 44px;                 /* tamaño mínimo táctil */
    --logo-h-mobile: 40px;
    --logo-h-desktop: 50px;
    --stripe: linear-gradient(90deg, var(--brand) 0 28%, var(--sky) 28% 48%, var(--accent) 48% 66%, var(--sun) 66% 82%, var(--leaf) 82% 100%);
}

/* Si el navegador soporta color-mix, los tonos derivados siguen a --brand y --accent
   (así, al cambiar los colores desde Configuración, todo el sistema se actualiza). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --brand-dark: color-mix(in srgb, var(--brand) 76%, #000);
        --brand-soft: color-mix(in srgb, var(--brand) 10%, #fff);
        --accent-dark: color-mix(in srgb, var(--accent) 80%, #000);
        --accent-soft: color-mix(in srgb, var(--accent) 14%, #fff);
        --info: var(--brand);
        --info-soft: var(--brand-soft);
        --info-ink: color-mix(in srgb, var(--brand) 66%, #000);
    }
}