/* =============================================================================
   ID Services · Design tokens
   FUENTE DE VERDAD del sistema visual. Ver docs/04-DESIGN-SYSTEM.md

   Estrategia: base neutra compartida + acento por marca.
   Las cinco marcas usan la misma tipografía, los mismos radios y los mismos
   componentes. Lo único que cambia es --accent y el motivo del ícono.

   Un color nuevo se agrega AQUÍ y en ningún otro lugar. Si aparece un
   hexadecimal suelto dentro de un componente, es un bug.
   ============================================================================= */

:root {
    /* -------------------------------------------------------------------------
       Marca por defecto: ID Services (índigo neutro, el centro del ecosistema)
       ------------------------------------------------------------------------- */
    --accent:        #4F6BED;
    --accent-strong: #3B54D4;
    --accent-soft:   #EEF1FE;
    --accent-contrast: #FFFFFF;

    /* -------------------------------------------------------------------------
       Superficies — tema claro
       ------------------------------------------------------------------------- */
    --bg:          #F7F9FC;
    --surface:     #FFFFFF;
    --surface-2:   #F1F4F9;
    --surface-3:   #E8EDF5;
    --border:      #E3E8F0;
    --border-strong: #CBD5E1;

    --text:        #16202F;
    --text-muted:  #64748B;
    --text-soft:   #94A3B8;
    --text-invert: #FFFFFF;

    /* -------------------------------------------------------------------------
       Semánticos — IGUALES en las cinco marcas, nunca se tiñen del acento.
       El "danger" de ID Trainers no es su rojo de marca: si lo fuera, nadie
       distinguiría "Reservar" de "Cancelar servicio".
       ------------------------------------------------------------------------- */
    --success:      #16A34A;
    --success-soft: #E8F6EC;
    --warning:      #D97706;
    --warning-soft: #FEF3E2;
    --danger:       #DC2626;
    --danger-soft:  #FDECEC;
    --info:         #2563EB;
    --info-soft:    #E8F0FE;

    /* -------------------------------------------------------------------------
       Tipografía
       ------------------------------------------------------------------------- */
    --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;

    --text-display: 2.5rem;    /* 40 */
    --text-h1:      2rem;      /* 32 */
    --text-h2:      1.5rem;    /* 24 */
    --text-h3:      1.25rem;   /* 20 */
    --text-lg:      1.125rem;  /* 18 */
    --text-base:    1rem;      /* 16 */
    --text-sm:      0.875rem;  /* 14 */
    --text-xs:      0.75rem;   /* 12 */

    /* -------------------------------------------------------------------------
       Espaciado — múltiplos de 4
       ------------------------------------------------------------------------- */
    --space-1: 0.25rem;   --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;      --space-6: 1.5rem;   --space-8: 2rem;
    --space-12: 3rem;     --space-16: 4rem;    --space-24: 6rem;

    /* -------------------------------------------------------------------------
       Forma — el radio de 14px es la firma del sistema: es lo que hace que las
       cinco marcas se sientan familia incluso en una captura sin logo.
       ------------------------------------------------------------------------- */
    --radius-sm:   8px;
    --radius:      14px;
    --radius-lg:   20px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(16, 32, 64, .06);
    --shadow:    0 4px 16px rgba(16, 32, 64, .08);
    --shadow-lg: 0 12px 32px rgba(16, 32, 64, .12);

    /* Respaldo primero: si el navegador no entiende color-mix, ignora la
       segunda declaración y se queda con el anillo sólido. */
    --ring: 0 0 0 3px var(--accent-soft);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);

    /* -------------------------------------------------------------------------
       Layout
       ------------------------------------------------------------------------- */
    --container:    1160px;
    --container-sm: 760px;
    --sidebar:      264px;
    --header:       64px;

    --transition: 160ms cubic-bezier(.4, 0, .2, 1);
}

/* =============================================================================
   Color de marca y modo oscuro
   -----------------------------------------------------------------------------
   Ya NO viven aquí. Los genera `tools/design-tokens.mjs` a partir del color del
   logo de cada marca y salen en `marcas.css`, que se carga DESPUÉS de este
   archivo.

       node tools/design-tokens.mjs --css > assets/css/marcas.css

   Se separaron por una razón concreta: web y apps tienen que sacar el color de
   la misma fuente. Mientras eran dos listas escritas a mano, el rojo de la
   landing y el de la app eran rojos distintos y nadie se enteraba hasta poner
   dos capturas al lado.

   Este archivo se queda con lo que NO cambia entre marcas ni entre modos:
   tipografía, espaciado, radios, medidas y transiciones.
   ============================================================================= */

/* Las sombras sí cambian de modo: sobre fondo oscuro una sombra fuerte no da
   profundidad, solo ensucia. La jerarquía allí la lleva la superficie. */
[data-theme="dark"] {
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow:    0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
        --shadow:    0 4px 16px rgba(0, 0, 0, .35);
        --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);
    }
}