/* ============================================================================
   CORE THEME v1.0 — Variables, tokens y reset base
   ----------------------------------------------------------------------------
   Sistema de variables CSS para el portafolio Rolando Cabrera v22.0.
   Soporta data-theme="classic-gold" + body.day-mode para modo claro.
   ============================================================================ */

/* ====== RESET BÁSICO ====== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-family: var(--f-body);
    color: var(--c-text);
    background: var(--c-bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background 0.4s ease, color 0.4s ease;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; }

/* ====== ROOT TOKENS (NIGHT MODE — Classic Gold) ====== */
:root,
[data-theme="classic-gold"] {
    /* Fuentes */
    --f-title: 'Sora', 'Inter', system-ui, sans-serif;
    --f-body: 'Inter', system-ui, sans-serif;
    --f-mono: 'JetBrains Mono', ui-monospace, monospace;
    --f-display: 'Playfair Display', serif;

    /* Colores base — Night (Classic Gold) */
    --c-bg:        #0A1628;
    --c-bg-2:     #0F1B33;
    --c-bg-3:     #142540;
    --c-card:     #15243E;

    /* Texto */
    --c-text:     #E8EEF7;
    --c-text-soft:#B7C3D4;
    --c-muted:    #8190A8;

    /* Bordes */
    --c-border:   rgba(201, 162, 75, 0.18);

    /* Acento gold/amber */
    --c-accent:   #C9A24B;
    --c-accent-2: #E8C766;
    --c-accent-soft: rgba(201, 162, 75, 0.12);
    --c-accent-glow: rgba(201, 162, 75, 0.45);

    /* Accion (wine) */
    --c-action:   #7B1F32;
    --c-action-light: #C73757;

    /* Radios */
    --r-sm: 6px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 22px;

    /* Transiciones */
    --t-fast: 0.18s cubic-bezier(.4, 0, .2, 1);
    --t-mid:  0.32s cubic-bezier(.4, 0, .2, 1);
    --t-slow: 0.55s cubic-bezier(.4, 0, .2, 1);

    /* Sombras */
    --s-soft: 0 6px 18px rgba(0, 0, 0, 0.25);
    --s-md:   0 12px 30px rgba(0, 0, 0, 0.32);
    --s-lg:   0 24px 60px rgba(0, 0, 0, 0.42);
}

/* ====== DAY MODE — Sobrescribe variables ====== */
body.day-mode {
    --c-bg:        #FFFFFF;
    --c-bg-2:     #F8FAFC;
    --c-bg-3:     #F1F5F9;
    --c-card:     #FFFFFF;

    --c-text:     #111827;
    --c-text-soft:#374151;
    --c-muted:    #6B7280;

    --c-border:   #E5E7EB;

    --c-accent:   #B8860B;
    --c-accent-2: #D4A017;
    --c-accent-soft: rgba(184, 134, 11, 0.08);
    --c-accent-glow: rgba(184, 134, 11, 0.30);

    --s-soft: 0 2px 6px rgba(0, 0, 0, 0.05);
    --s-md:   0 8px 20px rgba(0, 0, 0, 0.08);
    --s-lg:   0 16px 40px rgba(0, 0, 0, 0.12);
}

/* ====== HELPERS ====== */
.accent {
    background: linear-gradient(135deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ====== SCROLLBAR PERSONALIZADO ====== */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--c-bg-2); }
*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
    border-radius: 999px;
    border: 2px solid var(--c-bg-2);
}
*::-webkit-scrollbar-thumb:hover { background: var(--c-accent); }

/* ====== SELECCIÓN DE TEXTO ====== */
::selection {
    background: var(--c-accent);
    color: var(--c-bg);
}

/* ====== FOCUS VISIBLE ====== */
:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: 4px;
}