/* ============================================================
   GLOBAL — Design tokens, resets, accessibility
   Single source of truth for all pages.
   ============================================================ */

/* ---------- LIGHT THEME ---------- */
:root {
  --ink: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F7F9FA;
  --surface-3: #EFF1F3;
  --line: #D1D7DC;
  --line-soft: #E7EAEC;
  --text: #1C1D1F;
  --text-2: #3E4143;
  --muted: #5E6366;
  --accent: #A435F0;
  --accent-2: #8710D8;
  --accent-tint: #F6EDFD;
  --ok: #137333;
  --ok-tint: #EDF6EF;
  --warn: #8A6100;
  --danger: #C0392B;
  --danger-tint: #FCEEEC;
  --info: #155EEF;
  --star: #B4690E;
  --code-bg: #1C1D1F;
  --code-text: #E8E9EB;
  --card: var(--surface);
  --radius-md: 10px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .04),
    0 4px 12px rgba(0, 0, 0, .06);

  --font-ui: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;

  --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
  --step-0: clamp(.95rem, .92rem + .15vw, 1rem);
  --step-1: clamp(1.1rem, 1.05rem + .3vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.25rem + .7vw, 1.8rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.4rem, 1.8rem + 2.8vw, 4rem);

  --topbar-h: 64px;
  --radius: 12px;
  --radius-sm: 6px;
  --shadow: 0 2px 4px rgba(0, 0, 0, .06),
    0 10px 30px rgba(20, 10, 40, .08);
  --ring: 0 0 0 2px var(--ink), 0 0 0 4px var(--accent);
}

/* ---------- DARK THEME ---------- */
:root[data-theme="dark"] {
  --ink: #0A0913;
  --surface: #12111E;
  --surface-2: #1A1830;
  --surface-3: #232042;
  --line: #2C2947;
  --line-soft: #211E38;
  --text: #E9E7F5;
  --text-2: #B4AFD0;
  --muted: #9B97B5;
  --accent: #A435F0;
  --accent-2: #C084FC;
  --accent-tint: #221037;
  --ok: #34D399;
  --ok-tint: #10241C;
  --warn: #FBBF24;
  --danger: #F87171;
  --danger-tint: #2A1418;
  --info: #60A5FA;
  --star: #F3CA8C;
  --code-bg: #0D0C17;
  --code-text: #D8D4EC;
  --card: var(--surface);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .12),
    0 4px 12px rgba(0, 0, 0, .18);
  --shadow: 0 18px 45px -18px rgba(0, 0, 0, .75);
}

/* ---------- RESET ---------- */
*,
*::before,
*::after { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100% }

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: none;
  border: 0;
}

input, textarea, select { font: inherit; color: inherit }

/* ---------- ACCESSIBILITY ---------- */
:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 200;
  background: var(--text);
  color: var(--surface);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: 8px }

/* ---------- UTILITY ---------- */
.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

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