/* ==========================================================================
   Design tokens — CableSpeedy Admin
   Derivados de la marca oficial (navy #0D1321 + ámbar #FFC107).
   Estrategia: neutros tintados hacia navy (OKLCH) + un único acento ámbar.
   Sidebar navy (identidad) · workspace claro (operación diaria).
   ========================================================================== */
:root {
    /* --- Acento de marca (ámbar / dorado) --- */
    --accent:            oklch(0.815 0.158 84);    /* #FFC107 */
    --accent-deep:       oklch(0.788 0.162 78);    /* #FFB300 hover/press */
    --accent-hi:         oklch(0.865 0.135 90);    /* #FFCE3A highlight */
    --accent-ink:        oklch(0.285 0.045 262);   /* texto navy sobre ámbar */
    --accent-soft:       oklch(0.955 0.045 88);    /* tinte ámbar claro (fondos) */
    --accent-soft-2:     oklch(0.925 0.070 86);
    --accent-ring:       oklch(0.815 0.158 84 / 0.35);

    /* --- Superficies (workspace claro, tintado navy) --- */
    --bg:                oklch(0.980 0.005 255);   /* fondo app  ~ #F5F8FC */
    --surface:           oklch(0.998 0.002 255);   /* tarjetas   ~ near-white */
    --surface-2:         oklch(0.968 0.005 255);   /* sutil / hover */
    --surface-sunken:    oklch(0.955 0.006 255);   /* tracks, inputs sunken */

    /* --- Texto (ink navy) --- */
    --text:              oklch(0.245 0.024 262);   /* #0B1728 */
    --text-secondary:    oklch(0.435 0.023 258);
    --text-muted:        oklch(0.560 0.021 256);   /* slate #64748B */
    --text-faint:        oklch(0.680 0.016 256);

    /* --- Bordes --- */
    --border:            oklch(0.922 0.007 256);   /* #E7ECF2 */
    --border-strong:     oklch(0.880 0.010 256);
    --border-subtle:     oklch(0.955 0.005 256);

    /* --- Sidebar navy (superficie de marca) --- */
    --nav-bg:            oklch(0.205 0.028 262);   /* #0D1321 */
    --nav-bg-2:          oklch(0.245 0.034 260);   /* #0F2138 */
    --nav-raised:        oklch(0.285 0.034 260);   /* hover item */
    --nav-text:          oklch(0.820 0.014 258);
    --nav-text-strong:   oklch(0.985 0.004 258);
    --nav-muted:         oklch(0.615 0.020 258);
    --nav-faint:         oklch(0.520 0.020 258);
    --nav-border:        oklch(1 0 0 / 0.075);
    --nav-active-bg:     oklch(0.815 0.158 84 / 0.14);
    --nav-active-text:   var(--accent-hi);

    /* --- Semánticos (estado) --- */
    --success:           oklch(0.635 0.145 152);   /* verde */
    --success-ink:       oklch(0.470 0.130 152);
    --success-soft:      oklch(0.955 0.045 152);
    --danger:            oklch(0.585 0.205 27);     /* rojo */
    --danger-ink:        oklch(0.505 0.195 27);
    --danger-soft:       oklch(0.960 0.030 25);
    --info:              oklch(0.560 0.160 258);    /* azul */
    --info-ink:          oklch(0.480 0.160 262);
    --info-soft:         oklch(0.955 0.035 258);
    --warn:              oklch(0.760 0.150 70);     /* ámbar-naranja (pendiente) */
    --warn-ink:          oklch(0.560 0.120 60);
    --warn-soft:         oklch(0.955 0.050 78);
    --neutral-soft:      oklch(0.955 0.005 256);
    --neutral-ink:       var(--text-secondary);

    /* --- Colores de gráficos --- */
    --chart-cobrado:     oklch(0.815 0.158 84);    /* ámbar */
    --chart-esperado:    oklch(0.740 0.020 256);   /* slate track */
    --chart-1:           oklch(0.815 0.158 84);    /* ámbar */
    --chart-2:           oklch(0.560 0.160 258);   /* azul */
    --chart-3:           oklch(0.635 0.145 152);   /* verde */
    --chart-4:           oklch(0.470 0.030 262);   /* navy slate */
    --chart-grid:        oklch(0.930 0.006 256);

    /* --- Radios --- */
    --r-xs:  6px;
    --r-sm:  8px;
    --r-md:  10px;
    --r-btn: 12px;
    --r-lg:  14px;
    --r-card: 16px;
    --r-xl:  18px;
    --r-full: 999px;

    /* --- Sombras (tintadas navy, sutiles) --- */
    --shadow-xs: 0 1px 2px oklch(0.20 0.03 262 / 0.05);
    --shadow-sm: 0 1px 3px oklch(0.20 0.03 262 / 0.07), 0 1px 2px oklch(0.20 0.03 262 / 0.05);
    --shadow-md: 0 6px 20px oklch(0.20 0.03 262 / 0.08);
    --shadow-lg: 0 18px 44px oklch(0.16 0.03 262 / 0.16);
    --shadow-accent: 0 6px 18px oklch(0.815 0.158 84 / 0.35);

    /* --- Tipografía --- */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --fs-11: 0.6875rem;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-22: 1.375rem;
    --fs-28: 1.75rem;
    --fs-34: 2.125rem;

    /* --- Espaciado --- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 20px;  --space-6: 24px;  --space-7: 28px;  --space-8: 32px;
    --space-10: 40px; --space-12: 48px;

    /* --- Layout --- */
    --sidebar-w-expanded:   264px;
    --sidebar-w-collapsed:  76px;
    --sidebar-w:            var(--sidebar-w-expanded);
    --header-h:             64px;

    /* ======================================================================
       ALIAS SEMÁNTICOS (vocabulario estándar del Design System).
       Mapean a los tokens de marca de arriba. Úsalos en módulos nuevos.
       ====================================================================== */
    --primary:          var(--accent);        /* ámbar CableSpeedy */
    --primary-hover:    var(--accent-deep);
    --primary-ink:      var(--accent-ink);
    --primary-soft:     var(--accent-soft);
    --navy:             var(--nav-bg);
    --background:       var(--bg);
    /* --surface ya existe */
    --text-primary:     var(--text);
    /* --text-secondary y --text-muted ya existen */
    --warning:          var(--warn);
    --warning-soft:     var(--warn-soft);
    --warning-ink:      var(--warn-ink);
    /* --success / --danger / --info (+ -soft / -ink) ya existen */

    /* --- Motion (easing de marca) --- */
    --ease:      cubic-bezier(.22, 1, .36, 1);
    --t-fast:    130ms var(--ease);
    --t-med:     200ms var(--ease);
    --t-slow:    320ms var(--ease);
}