/* Before the Breach — Apple-esque design tokens */
:root {
  /* Neutrals — Apple-style grays */
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --bg-3: #e8e8ed;
  --fg: #1d1d1f;
  --fg-2: #424245;
  --fg-3: #6e6e73;
  --mute: #86868b;
  --rule-c: #d2d2d7;
  --rule-soft: #ececee;

  /* Accent — retaining BTB brick, tuned Apple-warm */
  --accent: #d93f2d;
  --accent-2: #b8321f;
  --accent-soft: #fdeceb;

  /* Support */
  --ink: #1d1d1f;
  --good: #30a46c;

  /* Type — SF stack first, Söhne/Geist fallback. NO Inter. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
  --serif: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; /* kept name, Apple uses sans for display */
  --mono: "SF Mono", ui-monospace, "Menlo", "JetBrains Mono", monospace;

  /* Scale — Apple is generous */
  --t-display: clamp(48px, 7.2vw, 104px);
  --t-h1: clamp(40px, 5vw, 80px);
  --t-h2: clamp(32px, 3.8vw, 64px);
  --t-h3: clamp(22px, 1.8vw, 32px);
  --t-body: 17px;
  --t-small: 14px;
  --t-mini: 12px;

  /* Grid */
  --gutter: 24px;
  --max: 1200px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-sm: 6px;

  /* Shadows — very soft */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 4px 10px rgba(0,0,0,0.04);
  --shadow-2: 0 2px 6px rgba(0,0,0,0.06), 0 20px 40px -12px rgba(0,0,0,0.12);
  --shadow-nav: 0 1px 0 rgba(0,0,0,0.06);
}

[data-theme="dark"] {
  --bg: #000000;
  --bg-2: #0f0f10;
  --bg-3: #1c1c1e;
  --fg: #f5f5f7;
  --fg-2: #c7c7cc;
  --fg-3: #8e8e93;
  --mute: #636366;
  --rule-c: #2c2c2e;
  --rule-soft: #1c1c1e;
  --accent: #ff5e4a;
  --accent-2: #e04638;
  --accent-soft: rgba(255,94,74,0.12);
  --ink: #f5f5f7;
  --shadow-1: none;
  --shadow-2: 0 20px 40px -12px rgba(0,0,0,0.5);
  --shadow-nav: 0 1px 0 rgba(255,255,255,0.06);
}

/* Reset-ish */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; font-family: inherit; }
a { color: inherit; text-decoration: none; }

/* Utility */
.mono { font-family: var(--mono); letter-spacing: 0; }
.smallcaps {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.rule { border: 0; border-top: 1px solid var(--rule-c); margin: 0; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.idx { font-family: var(--mono); font-size: 12px; color: var(--fg-3); letter-spacing: 0.02em; }

::selection { background: var(--accent); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule-c); border-radius: 10px; }