/* ══════════════════════════════════════════════════════════════
   KIT SÊNIOR — base.css
   Tokens, reset, tipografia
   ══════════════════════════════════════════════════════════════ */

/* ── DARK THEME (default) ─────────────────────────────────────── */
:root {
  --bg:        #0D1B2A;
  --bg2:       #162535;
  --surface:   #1a2d40;
  --surface2:  #1f3347;
  --border:    rgba(45,154,176,0.12);
  --border2:   rgba(45,154,176,0.22);

  --teal:      #2D9AB0;
  --teal-dim:  rgba(45,154,176,0.6);
  --amber:     #D4851A;
  --amber-dim: rgba(212,133,26,0.6);
  --green:     #1DB87A;
  --red:       #D94F4F;
  --purple:    #7C6FCD;
  --blue:      #3D8BCC;

  --text:      #E8EDF2;
  --text-dim:  rgba(232,237,242,0.55);
  --text-mute: rgba(232,237,242,0.30);

  --mono:      'DM Mono', 'JetBrains Mono', monospace;
  --sans:      'DM Sans', sans-serif;
  --display:   'DM Serif Display', serif;
  --r:         6px;

  --grid-color: rgba(45,154,176,0.04);
}

/* ── LIGHT THEME ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #F4F2EE;
  --bg2:       #FFFFFF;
  --surface:   #ECEAE5;
  --surface2:  #E4E2DC;
  --border:    rgba(45,154,176,0.18);
  --border2:   rgba(45,154,176,0.30);

  --text:      #1A2535;
  --text-dim:  rgba(26,37,53,0.55);
  --text-mute: rgba(26,37,53,0.35);

  --grid-color: rgba(45,154,176,0.06);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  overflow-x: hidden;
  min-height: 100vh;
  transition: background .2s, color .2s;
}

/* grid decorativo */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ── TIPOGRAFIA ───────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); color: var(--text); }

code {
  font-family: var(--mono);
  background: rgba(45,154,176,0.08);
  border: 1px solid rgba(45,154,176,0.15);
  padding: 1px 5px;
  font-size: .85em;
  color: var(--teal);
  border-radius: 3px;
}

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

/* ── SCROLLBAR ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px;
}

/* ── UTILS ────────────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}