/* base.css — CSS custom properties, reset, typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Color System ── */
  --red:         #E71D36;
  --red-dark:    #D6142E;
  --red-soft:    #fff1f2;
  --blue:        #123F9E;
  --blue-dark:   #0E2F75;
  --blue-soft:   #eff4ff;

  --bg:          #F8F9FB;
  --surface:     #FFFFFF;
  --sidebar-bg:  #FAFAFA;
  --border:      #E5E7EB;
  --border-soft: #F3F4F6;

  --text-primary:   #111827;
  --text-secondary: #6B7280;
  --text-muted:     #9CA3AF;

  /* ── Spacing ── */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;

  /* ── Border radius ── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-full: 999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.07);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.10);

  /* ── Transitions ── */
  --transition: 0.18s ease;
}

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

html { font-size: 15px; scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--text-primary); }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 0.95rem; }

p { color: var(--text-secondary); }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Label/caption ─────────────────────────────────────────────────────────── */
.label-caps {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

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

/* ── Focus ring ────────────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }