/* ============================================================
   base.css · Variables, reset, tipografía y layout
   ============================================================ */

:root {
  color-scheme: light;

  /* Superficies */
  --bg: #f7f7fa;
  --surface: #ffffff;
  --surface-2: #f1f1f6;
  --line: #e4e4ec;
  --line-strong: #d2d2de;

  /* Texto */
  --ink: #16161d;
  --ink-soft: #55555f;
  --ink-faint: #8b8b96;

  /* Acento */
  --accent: #4f46e5;
  --accent-hover: #4038d6;
  --accent-ink: #ffffff;
  --accent-soft: #eeedfd;
  --accent-line: #c9c5f7;

  /* Estados */
  --ok: #0f7b4f;
  --ok-soft: #e6f6ee;
  --err: #c0392b;
  --err-soft: #fdeceb;

  /* Bloque de código: oscuro siempre, para que se lea como algo "para pegar" */
  --code-bg: #14141c;
  --code-ink: #e9e9f2;
  --code-line: #14141c;

  /* Formas */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow: 0 1px 2px rgba(20, 20, 40, .04), 0 8px 24px -12px rgba(20, 20, 40, .12);
  --shadow-lg: 0 24px 60px -20px rgba(20, 20, 40, .30);
  --speed: .16s;

  /* Tipografía */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
}

/* ====== Modo oscuro ====== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0d0d12;
  --surface: #15151c;
  --surface-2: #1c1c25;
  --line: #272730;
  --line-strong: #383844;

  --ink: #ececf2;
  --ink-soft: #a0a0ae;
  --ink-faint: #6e6e7c;

  --accent: #8b7cff;
  --accent-hover: #9d90ff;
  --accent-ink: #12121a;
  --accent-soft: rgba(139, 124, 255, .14);
  --accent-line: rgba(139, 124, 255, .38);

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .12);
  --err: #ff8177;
  --err-soft: rgba(255, 129, 119, .12);

  --code-bg: #0a0a0f;
  --code-ink: #e4e4ee;
  --code-line: #272730;

  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0d0d12;
    --surface: #15151c;
    --surface-2: #1c1c25;
    --line: #272730;
    --line-strong: #383844;

    --ink: #ececf2;
    --ink-soft: #a0a0ae;
    --ink-faint: #6e6e7c;

    --accent: #8b7cff;
    --accent-hover: #9d90ff;
    --accent-ink: #12121a;
    --accent-soft: rgba(139, 124, 255, .14);
    --accent-line: rgba(139, 124, 255, .38);

    --ok: #4ade80;
    --ok-soft: rgba(74, 222, 128, .12);
    --err: #ff8177;
    --err-soft: rgba(255, 129, 119, .12);

    --code-bg: #0a0a0f;
    --code-ink: #e4e4ee;
    --code-line: #272730;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -14px rgba(0, 0, 0, .7);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .8);
  }
}

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

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
input, textarea, select, button { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
[hidden] { display: none !important; }

h1, h2, h3 { line-height: 1.2; letter-spacing: -.02em; font-weight: 650; }
h1 { font-size: clamp(1.9rem, 1.35rem + 2.4vw, 3rem); letter-spacing: -.03em; }
h2 { font-size: 1.125rem; }

a { color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ====== Layout ====== */
.wrap {
  width: 100%;
  max-width: 780px;
  margin-inline: auto;
  padding-inline: 20px;
}

main { flex: 1; padding-bottom: 72px; }
main > section + section { margin-top: 20px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 1rem + 1.6vw, 28px);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 60;
  text-decoration: none;
}
.skip-link:focus { left: 12px; }