/* ============================================================
   variables.css — Design Tokens de TK
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ── Colores de fondo ──────────────────────────────────── */
    --bg-primary:    #f8f9fb;
    --bg-secondary:  #f0f2f6;
    --bg-card:       rgba(255, 255, 255, 0.88);
    --bg-elevated:   #ffffff;
    --bg-overlay:    rgba(0, 0, 0, 0.55);

    /* ── Texto ─────────────────────────────────────────────── */
    --text-primary:  #1a202c;
    --text-secondary:#4a5568;
    --text-muted:    #9ca3af;
    --text-inverse:  #ffffff;

    /* ── Acento dorado (identidad de marca) ────────────────── */
    --accent:        #d69e2e;
    --accent-hover:  #b7791f;
    --accent-light:  rgba(214, 158, 46, 0.12);
    --accent-glow:   rgba(214, 158, 46, 0.25);
    --accent-text:   #744210;

    /* ── Bordes ────────────────────────────────────────────── */
    --border:        #e2e8f0;
    --border-hover:  #cbd5e0;
    --border-focus:  var(--accent);

    /* ── Estados semánticos ────────────────────────────────── */
    --danger:        #e53e3e;
    --danger-hover:  #c53030;
    --danger-light:  rgba(229, 62, 62, 0.10);
    --success:       #38a169;
    --success-light: rgba(56, 161, 105, 0.10);
    --warning:       #dd6b20;
    --info:          #3182ce;

    /* ── Sombras ───────────────────────────────────────────── */
    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.07);
    --shadow-md:  0 4px 14px rgba(0, 0, 0, 0.09);
    --shadow-lg:  0 12px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.16);
    --shadow-glow:0 0 24px var(--accent-glow);
    --shadow-card:0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0,0,0,0.04);

    /* ── Radios ────────────────────────────────────────────── */
    --radius-xs:  4px;
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full:9999px;

    /* ── Tipografía ────────────────────────────────────────── */
    --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
    --font-mono:  'Fira Code', 'Cascadia Code', monospace;

    /* ── Transiciones ──────────────────────────────────────── */
    --t-fast:  120ms ease;
    --t-base:  220ms ease;
    --t-slow:  380ms cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Espaciado base ────────────────────────────────────── */
    --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;

    /* ── Layout ────────────────────────────────────────────── */
    --header-h:  60px;
    --sidebar-w: 260px;
    --ad-banner-h: 90px;  /* Reservado para publicidad */

    /* ── Z-index ────────────────────────────────────────────── */
    --z-base:       0;
    --z-dropdown:  10;
    --z-sticky:    20;
    --z-header:    30;
    --z-modal:     40;
    --z-toast:     50;
    --z-tooltip:   60;
}

/* ── Modo oscuro ──────────────────────────────────────────── */
.dark {
    --bg-primary:    #0f1117;
    --bg-secondary:  #161926;
    --bg-card:       rgba(22, 25, 38, 0.88);
    --bg-elevated:   #1e2235;
    --bg-overlay:    rgba(0, 0, 0, 0.70);

    --text-primary:  #e2e8f0;
    --text-secondary:#9ca3af;
    --text-muted:    #4a5568;

    --accent:        #ecc94b;
    --accent-hover:  #f6e05e;
    --accent-light:  rgba(236, 201, 75, 0.12);
    --accent-glow:   rgba(236, 201, 75, 0.20);
    --accent-text:   #f6e05e;

    --border:        #2d3250;
    --border-hover:  #3d4270;

    --danger:        #fc8181;
    --danger-hover:  #f56565;
    --danger-light:  rgba(252, 129, 129, 0.12);
    --success:       #68d391;
    --success-light: rgba(104, 211, 145, 0.12);

    --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-md:     0 4px 14px rgba(0, 0, 0, 0.30);
    --shadow-lg:     0 12px 40px rgba(0, 0, 0, 0.40);
}