@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --bg-page:         #F7F8FA;
  --bg-surface:      #FFFFFF;
  --bg-subtle:       #F1F3F7;

  /* Text */
  --text-primary:    #1A1D23;
  --text-secondary:  #5A6472;
  --text-tertiary:   #8A93A0;

  /* Borders */
  --border:          #E4E7EC;
  --border-strong:   #D0D5DD;

  /* Brand */
  --brand:           #2563EB;
  --brand-hover:     #1D4ED8;
  --brand-fg:        #FFFFFF;
  --brand-subtle:    #EAF1FE;
  --brand-subtle-fg: #1D4ED8;

  /* Semantics: match quality */
  --top-fg:          #15803D;
  --top-subtle:      #E7F6EC;
  --ok-fg:           #B45309;
  --ok-subtle:       #FBF0DD;
  --low-fg:          #B91C1C;
  --low-subtle:      #FDECEC;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur:  160ms;

  /* Typography */
  --font-ui:    "Hanken Grotesk", system-ui, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;
  --font-serif: "Source Serif 4", Georgia, serif;
}

[data-theme="dark"] {
  --bg-page:         #0E1116;
  --bg-surface:      #161A21;
  --bg-subtle:       #1C2129;

  --text-primary:    #ECEDEF;
  --text-secondary:  #9BA3AF;
  --text-tertiary:   #6B7280;

  --border:          rgba(255, 255, 255, 0.08);
  --border-strong:   rgba(255, 255, 255, 0.14);

  --brand:           #5A8DEE;
  --brand-hover:     #7AA4F2;
  --brand-fg:        #0E1116;
  --brand-subtle:    rgba(90, 141, 238, 0.16);
  --brand-subtle-fg: #93B4F5;

  --top-fg:     #4ADE80;
  --top-subtle: rgba(34, 197, 94, 0.15);
  --ok-fg:      #FBBF24;
  --ok-subtle:  rgba(217, 119, 6, 0.16);
  --low-fg:     #F87171;
  --low-subtle: rgba(220, 38, 38, 0.16);

  --shadow-sm: none;
  --shadow-md: none;
}

/* ── Reset & Base ─────────────────────────────────────────────────────── */

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

html { font-size: 16px; }

body {
  font-family: var(--font-ui);
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}