/**
 * ch-reset.css — Reset moderno + Design Tokens CubanHacks v3
 * 100% nuevo. No hereda nada del diseño anterior.
 */

/* ── Google Fonts ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
    /* — Backgrounds — */
    --bg-root:       #070711;
    --bg-sidebar:    #0c0c1a;
    --bg-topbar:     rgba(7,7,17,0.85);
    --bg-card:       rgba(255,255,255,0.035);
    --bg-card-hover: rgba(255,255,255,0.065);
    --bg-surface:    #0e0e1c;
    --bg-input:      rgba(255,255,255,0.04);

    /* — Borders — */
    --border:        rgba(255,255,255,0.06);
    --border-hover:  rgba(99,102,241,0.45);
    --border-active: rgba(99,102,241,0.7);
    --border-subtle: rgba(255,255,255,0.04);

    /* — Brand Colors — */
    --indigo:        #6366f1;
    --indigo-dark:   #4f46e5;
    --indigo-light:  #818cf8;
    --indigo-glow:   rgba(99,102,241,0.25);
    --cyan:          #06b6d4;
    --cyan-dark:     #0891b2;
    --cyan-glow:     rgba(6,182,212,0.2);
    --violet:        #8b5cf6;
    --violet-glow:   rgba(139,92,246,0.2);
    --rose:          #f43f5e;
    --rose-glow:     rgba(244,63,94,0.2);
    --emerald:       #10b981;
    --emerald-glow:  rgba(16,185,129,0.18);
    --amber:         #f59e0b;
    --amber-glow:    rgba(245,158,11,0.18);
    --gold:          #fbbf24;

    /* — Gradients — */
    --grad-primary:  linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --grad-accent:   linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
    --grad-warm:     linear-gradient(135deg, #f59e0b 0%, #f43f5e 100%);
    --grad-green:    linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --grad-hero:     linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #06b6d4 100%);

    /* — Text — */
    --text-1:        #f8fafc;
    --text-2:        #cbd5e1;
    --text-3:        #94a3b8;
    --text-4:        #64748b;
    --text-5:        #475569;

    /* — Typography — */
    --font-display:  'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --font-body:     'Inter', system-ui, sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    /* — Sizing — */
    --sidebar-w:     260px;
    --topbar-h:      64px;
    --radius-xs:     6px;
    --radius-sm:     10px;
    --radius-md:     14px;
    --radius-lg:     20px;
    --radius-xl:     28px;
    --radius-full:   9999px;

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

    /* — Shadows — */
    --shadow-sm:     0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:     0 4px 24px rgba(0,0,0,0.4);
    --shadow-lg:     0 8px 48px rgba(0,0,0,0.5);
    --shadow-indigo: 0 0 30px rgba(99,102,241,0.2);
    --shadow-glow:   0 0 40px rgba(99,102,241,0.15);

    /* — Transitions — */
    --ease-fast:     0.15s cubic-bezier(0.4,0,0.2,1);
    --ease-normal:   0.25s cubic-bezier(0.4,0,0.2,1);
    --ease-slow:     0.4s cubic-bezier(0.4,0,0.2,1);
    --ease-spring:   0.5s cubic-bezier(0.34,1.56,0.64,1);

    /* — Z-index — */
    --z-base:        1;
    --z-dropdown:    100;
    --z-sidebar:     200;
    --z-overlay:     190;
    --z-topbar:      150;
    --z-modal:       1000;
    --z-toast:       2000;

    /* — Blur — */
    --blur-sm:       blur(8px);
    --blur-md:       blur(16px);
    --blur-lg:       blur(24px);

    /* — Spotlight (JS sets these) — */
    --spot-x: 50%;
    --spot-y: 50%;
    --spot-op: 0;
}

/* ── Modern Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-2);
    background-color: var(--bg-root);
    background-image:
        radial-gradient(ellipse 80% 50% at 15% 0%,   rgba(99,102,241,0.12) 0%, transparent 55%),
        radial-gradient(ellipse 60% 40% at 85% 100%,  rgba(6,182,212,0.08) 0%, transparent 50%),
        radial-gradient(ellipse 50% 60% at 50% 50%,   rgba(139,92,246,0.04) 0%, transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-1);
    letter-spacing: -0.02em;
}

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.4); }

/* ── Selection ────────────────────────────────────────────────────── */
::selection { background: rgba(99,102,241,0.3); color: var(--text-1); }

/* ── Focus ring ───────────────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--indigo);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* Body siempre visible — sin trucos de opacidad */
body { opacity: 1; }