/* =========================================================================
   TOKENS — única fuente de colores, espaciado, tipografía, radios,
   sombras y movimiento. El resto de archivos CSS solo usa var(--*).

   Sistema: Minimalismo / Swiss · neutros fríos · un único acento (azul).
   Tema: preferencia del sistema; [data-theme] manual (localStorage) manda.
   ========================================================================= */

/* ---- 1. Escala no dependiente del tema -------------------------------- */
:root {
    /* Tipografía */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Fira Code', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;

    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --tracking-tight: -0.015em;

    /* Espaciado (base 4px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Forma */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 999px;
    --border-width: 1px;

    /* Layout */
    --container-width: 76rem;
    --reading-width: 65ch;
    --target-size: 2.75rem; /* 44px: mínimo táctil */
    --topbar-height: 3.5rem;
    --icon-size: 1.25rem;
    --help-width: 38rem;
    --field-basis: 14rem;
    --field-basis-wide: 16rem;
    --auth-width: 26rem;
    --modal-width: 32rem;
    --table-min-width: 52rem;
    --col-url-max: 18rem;
    --col-title-max: 14rem;
    --col-check-width: 3.5rem;
    --col-short-width: 21rem;
    --col-service-width: 10rem;
    --col-clicks-width: 5rem;
    --col-date-width: 11rem;
    --switch-width: 2.75rem;
    --switch-height: 1.5rem;
    --switch-thumb: 1rem;
    --badge-icon-size: 2.25rem;
    --brand-mark-size: 2.5rem;

    /* Movimiento */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 500ms;
    --reveal-distance: 1rem;
    --reveal-stagger: 80ms;

    /* Capas */
    --z-topbar: 20;
    --z-popover: 30;
    --z-toast: 40;
}

/* ---- 2. Tema claro (por defecto) -------------------------------------- */
:root {
    color-scheme: light;

    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --surface-hover: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --control-border: #7c8aa0;

    --text: #0f172a;
    --text-2: #475569;
    --text-3: #596579;

    /* Acento único (CTAs, foco, enlaces, selección) */
    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --on-accent: #ffffff;
    --accent-text: #1d4ed8;
    --accent-soft: #eff6ff;
    --focus-ring: #2563eb;

    /* Estados semánticos (no son acentos de marca) */
    --success-text: #15803d;
    --success-bg: #dcfce7;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --on-danger: #ffffff;
    --danger-text: #b91c1c;
    --danger-bg: #fee2e2;
    --warning-text: #92400e;
    --warning-bg: #fef3c7;
    --info-text: #1d4ed8;
    --info-bg: #dbeafe;

    --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
    --shadow-md: 0 4px 12px rgb(15 23 42 / 0.08);
    --shadow-lg: 0 16px 40px rgb(15 23 42 / 0.16);
    --overlay: rgb(15 23 42 / 0.5);

    /* Qué icono muestra el botón de tema */
    --icon-moon-display: inline-block;
    --icon-sun-display: none;
}

/* ---- 3. Tema oscuro: sistema (sin elección manual) --------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --bg: #0c1220;
        --surface: #131b2c;
        --surface-2: #1b2538;
        --surface-hover: #1b2538;
        --border: #263248;
        --border-strong: #34435c;
        --control-border: #6b7c96;

        --text: #f1f5f9;
        --text-2: #a9b6c9;
        --text-3: #8393aa;

        --accent: #2563eb;
        --accent-hover: #1d4ed8;
        --on-accent: #ffffff;
        --accent-text: #7db0ff;
        --accent-soft: #172447;
        --focus-ring: #7db0ff;

        --success-text: #4ade80;
        --success-bg: #0f2a1c;
        --danger: #dc2626;
        --danger-hover: #b91c1c;
        --on-danger: #ffffff;
        --danger-text: #f87171;
        --danger-bg: #2d1316;
        --warning-text: #fbbf24;
        --warning-bg: #2b2108;
        --info-text: #7db0ff;
        --info-bg: #172447;

        --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
        --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6);
        --overlay: rgb(0 0 0 / 0.65);

        --icon-moon-display: none;
        --icon-sun-display: inline-block;
    }
}

/* ---- 4. Tema oscuro: elección manual ---------------------------------- */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0c1220;
    --surface: #131b2c;
    --surface-2: #1b2538;
    --surface-hover: #1b2538;
    --border: #263248;
    --border-strong: #34435c;
    --control-border: #6b7c96;

    --text: #f1f5f9;
    --text-2: #a9b6c9;
    --text-3: #8393aa;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --on-accent: #ffffff;
    --accent-text: #7db0ff;
    --accent-soft: #172447;
    --focus-ring: #7db0ff;

    --success-text: #4ade80;
    --success-bg: #0f2a1c;
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --on-danger: #ffffff;
    --danger-text: #f87171;
    --danger-bg: #2d1316;
    --warning-text: #fbbf24;
    --warning-bg: #2b2108;
    --info-text: #7db0ff;
    --info-bg: #172447;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.6);
    --overlay: rgb(0 0 0 / 0.65);

    --icon-moon-display: none;
    --icon-sun-display: inline-block;
}