/* ==========================================================================
   Design tokens — Sistema de Facturación y Cobranzas
   Ver docs/DESIGN_SYSTEM.md. Nunca usar un color/spacing/radius crudo
   fuera de este archivo: todo componente consume var(--token).
   ========================================================================== */

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"),
         url("../fonts/inter/inter-latin-400-normal.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"),
         url("../fonts/inter/inter-latin-500-normal.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"),
         url("../fonts/inter/inter-latin-600-normal.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"),
         url("../fonts/inter/inter-latin-700-normal.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Tells the browser to render its own native chrome (scrollbars, form
       control internals not otherwise styled, spell-check UI) using a
       light-appropriate palette — the other half of "matches the theme"
       beyond just our own custom scrollbar rules in app.css, and the only
       thing that affects scrollbars in Firefox without scrollbar-color. */
    color-scheme: light;

    /* ---- Color — light (default) ---- */
    --color-navy: #0F2747;
    --color-navy-hover: #16375F;
    --color-navy-active: #0B1D38;
    --color-blue: #2563EB;
    --color-blue-hover: #1D4ED8;
    --color-blue-subtle: #EFF6FF;
    --color-teal: #14B8A6;
    --color-teal-subtle: #F0FDFA;

    --color-success: #16A34A;
    --color-success-subtle: #F0FDF4;
    --color-warning: #F59E0B;
    --color-warning-subtle: #FFFBEB;
    --color-danger: #DC2626;
    --color-danger-subtle: #FEF2F2;
    --color-info: #0284C7;
    --color-info-subtle: #F0F9FF;

    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-elevated: #FFFFFF;
    --color-border: #E2E8F0;
    --color-border-strong: #CBD5E1;

    --color-text: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-tertiary: #94A3B8;
    --color-text-on-navy: #F8FAFC;
    --color-text-on-navy-muted: #94A6C2;

    /* ---- Typography ---- */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --text-h1: 2rem;      /* 32px */
    --text-h2: 1.5rem;    /* 24px */
    --text-h3: 1.125rem;  /* 18px */
    --text-body: 0.875rem;/* 14px */
    --text-body-lg: 1rem; /* 16px */
    --text-label: 0.8125rem; /* 13px */
    --text-xs: 0.75rem;   /* 12px */

    /* ---- Spacing scale (4px base) ---- */
    --space-1: 0.25rem;  /* 4  */
    --space-2: 0.5rem;   /* 8  */
    --space-3: 0.75rem;  /* 12 */
    --space-4: 1rem;     /* 16 */
    --space-5: 1.25rem;  /* 20 */
    --space-6: 1.5rem;   /* 24 */
    --space-8: 2rem;     /* 32 */
    --space-10: 2.5rem;  /* 40 */
    --space-12: 3rem;    /* 48 */
    --space-16: 4rem;    /* 64 */

    /* ---- Radius ---- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* ---- Shadow ---- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 12px 24px -8px rgba(15, 23, 42, 0.18), 0 4px 8px rgba(15, 23, 42, 0.08);

    /* ---- Motion ---- */
    --transition-fast: 150ms ease-out;
    --transition-base: 200ms ease-out;
    --transition-modal: 220ms ease-out;

    /* ---- Layout ---- */
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 72px;
    --topbar-height: 64px;
}

/* Dark mode tokens — activated either by the topbar toggle (explicit
   [data-theme="dark"|"light"] on <html>, persisted in localStorage as
   "cc_theme", applied pre-paint by the inline script in <head> to avoid a
   flash of the wrong theme — see layouts/app.blade.php and guest.blade.php)
   or, absent an explicit choice, by the OS preference. Deliberately NOT a
   naive inversion: elevated surfaces are lighter than the base background,
   matching how depth reads in a dark UI. Keep both blocks below in sync. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-navy: #16375F;
        --color-navy-hover: #1E4A7A;
        --color-blue: #3B82F6;
        --color-blue-subtle: rgba(37, 99, 235, 0.16);
        --color-teal: #2DD4BF;
        --color-teal-subtle: rgba(20, 184, 166, 0.14);

        --color-success-subtle: rgba(22, 163, 74, 0.16);
        --color-warning-subtle: rgba(245, 158, 11, 0.16);
        --color-danger-subtle: rgba(220, 38, 38, 0.18);
        --color-info-subtle: rgba(2, 132, 199, 0.18);

        --color-bg: #0B1120;
        --color-surface: #111827;
        --color-surface-elevated: #1E293B;
        --color-border: #334155;
        --color-border-strong: #475569;

        --color-text: #F8FAFC;
        --color-text-secondary: #94A3B8;
        --color-text-tertiary: #64748B;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 16px 32px -12px rgba(0, 0, 0, 0.55);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-navy: #16375F;
    --color-navy-hover: #1E4A7A;
    --color-blue: #3B82F6;
    --color-blue-subtle: rgba(37, 99, 235, 0.16);
    --color-teal: #2DD4BF;
    --color-teal-subtle: rgba(20, 184, 166, 0.14);

    --color-success-subtle: rgba(22, 163, 74, 0.16);
    --color-warning-subtle: rgba(245, 158, 11, 0.16);
    --color-danger-subtle: rgba(220, 38, 38, 0.18);
    --color-info-subtle: rgba(2, 132, 199, 0.18);

    --color-bg: #0B1120;
    --color-surface: #111827;
    --color-surface-elevated: #1E293B;
    --color-border: #334155;
    --color-border-strong: #475569;

    --color-text: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-tertiary: #64748B;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 32px -12px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}