/* ============================================================
   CAREEROPS — THEMES
   Dark (default), Light, y seguir el sistema operativo.
   ============================================================ */

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-base);
  transition: background-color var(--transition), color var(--transition);
  min-height: 100vh;
}

/* ── Tema Light ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg-base:      #f0f2f8;
  --bg-surface:   #ffffff;
  --bg-elevated:  #f8faff;
  --bg-hover:     #eef0f8;
  --bg-active:    #e5e8f5;

  --border:       rgba(0 0 0 / .08);
  --border-strong: rgba(0 0 0 / .16);
  --border-focus: rgba(99 102 241 / .5);

  --text-primary:   #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-accent:    #4f46e5;

  --shadow-sm: 0 1px 3px rgba(0 0 0 / .1);
  --shadow:    0 4px 16px rgba(0 0 0 / .1);
  --shadow-lg: 0 8px 32px rgba(0 0 0 / .15);
}

/* ── Sistema operativo → dark ────────────────────────────────── */
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg-base:      #f0f2f8;
    --bg-surface:   #ffffff;
    --bg-elevated:  #f8faff;
    --bg-hover:     #eef0f8;
    --bg-active:    #e5e8f5;
    --border:       rgba(0 0 0 / .08);
    --border-strong: rgba(0 0 0 / .16);
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-accent:    #4f46e5;
    --shadow-sm: 0 1px 3px rgba(0 0 0 / .1);
    --shadow:    0 4px 16px rgba(0 0 0 / .1);
    --shadow-lg: 0 8px 32px rgba(0 0 0 / .15);
  }
}

/* ── Scrollbar personalizado ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Selección de texto ──────────────────────────────────────── */
::selection {
  background: var(--accent-glow);
  color: var(--text-primary);
}

/* ── Focus visible ───────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}