/* ===========================================================================
   LADO Creator Hub — Design Tokens (v1, dark-first)
   Estética: "panel de instrumentos" minimalista. Sin gradientes.
   ========================================================================= */

:root,
[data-theme="dark"] {
    /* --- Superficies (oscuro neutro-cálido) --- */
    --bg:            #0c0d0f;
    --bg-grid:       #141519;   /* puntos de la textura de fondo */
    --qr-bg:         #ffffff;   /* fondo del QR de 2FA: blanco fijo por escaneabilidad */
    --surface:       #16181c;
    --surface-2:     #1c1f24;   /* hover / elevación sutil */
    --surface-3:     #22262c;
    --border:        #25282e;   /* hairline */
    --border-strong: #33373f;

    /* --- Texto --- */
    --text:        #e9eaec;
    --text-dim:    #9ba1a9;
    --text-faint:  #6b7178;
    --text-on-accent: #f7f9ff;

    /* --- Acento (uno solo, con disciplina) --- */
    --accent:        #4d7cfe;
    --accent-hover:  #6a91ff;
    --accent-press:  #3d68e0;
    --accent-soft:   rgba(77, 124, 254, 0.13);
    --accent-ring:   rgba(77, 124, 254, 0.45);

    /* --- Semáforo / estados --- */
    --ok:      #35c281;
    --ok-soft: rgba(53, 194, 129, 0.13);
    --warn:      #e3a13a;
    --warn-soft: rgba(227, 161, 58, 0.13);
    --danger:      #e85c52;
    --danger-soft: rgba(232, 92, 82, 0.13);

    /* --- Tipografía --- */
    --font-ui:   "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;

    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;
    --fs-3xl:  36px;

    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semi:    600;
    --fw-bold:    700;

    --lh-tight: 1.2;
    --lh-base:  1.5;

    /* --- Espaciado (escala 4px) --- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 40px;
    --s-8: 48px;
    --s-9: 64px;

    /* --- Forma --- */
    --radius-sm: 6px;
    --radius:    9px;
    --radius-lg: 13px;
    --radius-pill: 999px;

    /* --- Elevación (por borde + sombra mínima, nunca dramática) --- */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 6px 24px rgba(0, 0, 0, 0.45);
    --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.55);

    /* --- Layout --- */
    --sidebar-w: 244px;
    --topbar-h:  56px;
    --content-max: 1320px;

    /* --- Motion --- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 120ms;
    --dur:      180ms;
    --dur-slow: 280ms;

    /* --- z-index --- */
    --z-sidebar: 20;
    --z-topbar:  30;
    --z-drawer:  60;
    --z-overlay: 70;
    --z-cmdk:    80;
    --z-toast:   90;

    color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}