/* =====================================================================
   base.css — Reset, Custom Properties, Typography, Utilities
   IDEVAPI Ajuda — v2.0 (Material Design 3 / Inter)
   ===================================================================== */

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

/* ─── Custom Properties (MD3 colour tokens) ─────────────────────────────── */
:root {
  /* Brand / Primary */
  --color-primary:            #003e6f;
  --color-primary-dark:       #002b4e;
  --color-primary-light:      #d3e4ff;
  --color-primary-container:  #005596;
  --color-on-primary:         #ffffff;

  /* Secondary */
  --color-secondary:          #00677f;
  --color-secondary-container:#97e2fd;
  --color-on-secondary-container: #00677e;

  /* Accent (kept for focus rings) */
  --color-accent:             #F08300;

  /* Text */
  --color-text:               #191c1e;
  --color-text-muted:         #414750;

  /* Surfaces (MD3) */
  --color-bg:                 #f8f9fb;
  --color-surface:            #ffffff;
  --color-surface-container:  #edeef0;
  --color-surface-container-high: #e7e8ea;
  --color-surface-container-low:  #f3f4f6;
  --color-border:             #c1c7d2;

  /* Alerts */
  --color-warning-bg:         #fff3cd;
  --color-warning-border:     #ffc107;
  --color-warning-text:       #664d03;
  --color-info-bg:            #d3e4ff;
  --color-info-border:        #005596;
  --color-info-text:          #003e6f;
  --color-error-bg:           #ffdad6;
  --color-error-border:       #ba1a1a;
  --color-error-text:         #93000a;
  --color-success-bg:         #d1e7dd;
  --color-success-border:     #198754;
  --color-success-text:       #0f5132;

  /* Code */
  --color-code-bg:            #1e2229;
  --color-code-text:          #c6c4df;
  --color-code-inline-bg:     #e7edf4;
  --color-line-hl:            #3e4451;
  --color-line-num:           #636d83;

  /* Misc */
  --font-body:     'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:     'Cascadia Code', 'Fira Code', 'Consolas', 'Courier New', monospace;
  --radius:        8px;
  --radius-lg:     12px;
  --radius-xl:     16px;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.05);
  --shadow:        0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
  --shadow-lg:     0 4px 16px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.06);
  --transition:    0.2s ease;
  --max-content-width: 1200px;
  --topbar-height: 0px;
  --sidebar-width: 264px;
  --footer-height: 30px;
}

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #999; }

/* ─── Base Typography ────────────────────────────────────────────────────── */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

h1 { font-size: 1.9rem; margin-bottom: 1rem; font-weight: 800; }
h2 {
  font-size: 1.45rem;
  margin-top: 2.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--color-border);
}
h3 { font-size: 1.15rem; margin-top: 1.6rem; }
h4 { font-size: 1rem;    margin-top: 1.25rem; color: var(--color-text); font-weight: 600; }

/* First heading in a section doesn't need top margin */
.content section > h2:first-child,
.content > h2:first-child { margin-top: 0; }

p { margin-bottom: 1rem; }

ul, ol { padding-left: 1.6rem; margin-bottom: 1rem; }
li { margin-bottom: 0.3rem; }
li > ul, li > ol { margin-top: 0.25rem; margin-bottom: 0.25rem; }

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-container); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
  text-decoration: none;
}

strong, b { font-weight: 600; }
em, i { font-style: italic; }

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-code-inline-bg);
  color: var(--color-primary);
  padding: 0.15em 0.45em;
  border-radius: 4px;
  border: 1px solid rgba(0,62,111,0.1);
}

/* Code inside pre */
pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
  font-size: 1em;
}

/* Focus visible */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ─── Utilities ──────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* ─── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ─── Dark mode ──────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text:           #dde3ee;
    --color-text-muted:     #9aa0b0;
    --color-bg:             #1b1e26;
    --color-surface:        #23272f;
    --color-surface-container: #2a2e38;
    --color-surface-container-high: #32363f;
    --color-surface-container-low: #1e2229;
    --color-border:         #363c49;
    --color-primary-light:  #082a35;
    --color-code-inline-bg: #1a2530;
    --color-warning-bg:     #332200;
    --color-warning-text:   #ffc107;
    --color-info-bg:        #002833;
    --color-info-text:      #7dd3fc;
    --color-error-bg:       #2d0909;
    --color-error-text:     #fca5a5;
    --color-success-bg:     #052e16;
    --color-success-text:   #86efac;
  }

  code {
    background: #1a272f;
    border-color: rgba(0,200,255,0.1);
    color: #7ecfdc;
  }
}