/* ═══════════════════════════════════════════════════════════════════════
   FIRST SALE SOCIETY — 1 · TOKENS & BASE
   Clean rebuild → Apple.com editorial system. Light-first.
   Defines every CSS var the course's inline-styled HTML consumes, plus the
   global reset and base typography. Theme toggles via body.light-mode /
   body.dark-mode (html.preload-dark mirrors dark before hydration).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   TOKENS — LIGHT (default)
   ───────────────────────────────────────────────────────────── */
:root,
body.light-mode {
  /* Surfaces */
  --bg:        #fbfbfd;
  --bg2:       #f5f5f7;
  --surface:   #ffffff;
  --surface2:  #f5f5f7;
  --surface3:  #ececef;
  --glass:     rgba(255,255,255,0.72);
  --glass-d:   rgba(0,0,0,0.02);

  /* Text */
  --text:      #1d1d1f;
  --text2:     #6e6e73;
  --text3:     #86868b;
  --heading:   #1d1d1f;

  /* Hairlines */
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.12);
  --border3:   rgba(0,0,0,0.18);

  /* Accent — Apple system blue + gradient companion */
  --accent:    #0066cc;
  --accent2:   #4d94ff;
  --accent-h:  #0055b3;
  --accent-glow:  rgba(0,102,204,0.08);
  --accent-glow2: rgba(0,102,204,0.045);
  --grad: linear-gradient(90deg, #0066cc, #4d94ff);
  --grad-135: linear-gradient(135deg, #0066cc, #4d94ff);

  /* Semantic status (readable on light) */
  --green:  #1d8a4e;
  --yellow: #9a6a00;
  --red:    #d70015;
  --purple: #6e4ff0;
  --green-glow:  rgba(29,138,78,0.10);
  --yellow-glow: rgba(154,106,0,0.10);
  --red-glow:    rgba(215,0,21,0.08);

  /* Discord brand (kept as-is) */
  --discord: #5865f2;
  --discord-text: #5865f2;

  /* Radii (values the data HTML expects) */
  --r-sm:  12px;
  --r-md:  18px;
  --r-lg:  26px;
  --r-xl:  30px;
  --r-pill: 980px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.07);
  --shadow-lg:   0 12px 36px rgba(0,0,0,0.10);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.06);

  /* Layout metrics */
  --sidebar-w:   272px;
  --content-pad: clamp(20px, 4vw, 64px);
  --content-max: 880px;

  /* Type stacks (no Inter — pure SF Pro / system) */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  color-scheme: light;
}

/* ─────────────────────────────────────────────────────────────
   TOKENS — DARK
   ───────────────────────────────────────────────────────────── */
html.preload-dark,
body.dark-mode {
  --bg:        #000000;
  --bg2:       #0a0a0b;
  --surface:   #161617;
  --surface2:  #1c1c1e;
  --surface3:  #2c2c2e;
  --glass:     rgba(22,22,23,0.72);
  --glass-d:   rgba(255,255,255,0.04);

  --text:      #f5f5f7;
  --text2:     #a1a1a6;
  --text3:     #86868b;
  --heading:   #ffffff;

  --border:    rgba(255,255,255,0.10);
  --border2:   rgba(255,255,255,0.16);
  --border3:   rgba(255,255,255,0.24);

  --accent:    #2997ff;
  --accent2:   #7cc0ff;
  --accent-h:  #47a6ff;
  --accent-glow:  rgba(41,151,255,0.14);
  --accent-glow2: rgba(41,151,255,0.07);
  --grad: linear-gradient(90deg, #2997ff, #7cc0ff);
  --grad-135: linear-gradient(135deg, #2997ff, #7cc0ff);

  --green:  #30d158;
  --yellow: #ffd60a;
  --red:    #ff453a;
  --purple: #bf80ff;
  --green-glow:  rgba(48,209,88,0.14);
  --yellow-glow: rgba(255,214,10,0.12);
  --red-glow:    rgba(255,69,58,0.12);

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.5);
  --shadow-md:   0 4px 18px rgba(0,0,0,0.5);
  --shadow-lg:   0 14px 40px rgba(0,0,0,0.6);
  --shadow-card: 0 4px 28px rgba(0,0,0,0.5);

  color-scheme: dark;
}

/* ─────────────────────────────────────────────────────────────
   RESET
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* No permanent transition — ThemeToggle.handleToggle() applies it
     transiently (0.25 s) so user-triggered switches still animate smoothly
     without the flash caused by body background animating from the
     unstyled light default to dark on every hard page load. */
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--heading);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.12;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--heading); }
em { font-style: italic; }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.18s ease;
}
a:hover { color: var(--accent-h); }

ul, ol { margin: 0 0 1em; padding-left: 1.4em; }
li { margin: 0.3em 0; text-wrap: pretty; }

img, svg, video { max-width: 100%; }
img { height: auto; border-style: none; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
code {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.12em 0.4em;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

button { font-family: inherit; }

/* Selection + focus */
::selection { background: var(--accent-glow); color: var(--heading); }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scrollbars — thin, quiet */
* { scrollbar-width: thin; scrollbar-color: var(--border3) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border3);
  border-radius: 980px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text3); background-clip: padding-box; }