/* RalphX design tokens — mirrors the existing site exactly */
:root {
  --bg-base:      hsl(220 10% 8%);
  --bg-surface:   hsl(220 10% 12%);
  --bg-elevated:  hsl(220 10% 16%);
  --bg-deep:      hsl(220 10% 6%);
  --bg-hover:     hsl(220 10% 20%);

  --text-primary:   hsl(220 10% 92%);
  --text-secondary: hsl(220 10% 62%);
  --text-muted:     hsl(220 10% 45%);
  --text-faint:     hsl(220 10% 30%);

  --border-subtle:  hsl(220 10% 18%);
  --border-default: hsl(220 10% 22%);
  --border-strong:  hsl(220 10% 30%);

  --accent:         hsl(14 100% 60%);
  --accent-hover:   hsl(14 100% 55%);
  --accent-soft:    hsla(14 100% 60% / 0.15);
  --accent-softer:  hsla(14 100% 60% / 0.08);
  --accent-border:  hsla(14 100% 60% / 0.30);

  --status-success: #34c77b;
  --status-info:    #4a9eff;
  --status-warning: #f0b941;
  --status-busy:    var(--accent);

  --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body:    "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Monaco, monospace;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 22px;

  --shadow-sm: 0 1px 2px hsla(0 0% 0% / 0.3);
  --shadow-md: 0 4px 6px hsla(0 0% 0% / 0.3), 0 8px 16px hsla(0 0% 0% / 0.2);
  --shadow-lg: 0 10px 15px hsla(0 0% 0% / 0.3), 0 20px 40px hsla(0 0% 0% / 0.25);
  --shadow-xl: 0 24px 60px hsla(0 0% 0% / 0.45), 0 8px 24px hsla(0 0% 0% / 0.3);

  /* Apple-style easing */
  --ease-apple: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-apple-in: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-apple-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--bg-base);
  color-scheme: dark;
  /* No 'scroll-behavior: smooth' here — it interferes with our custom
     rAF-driven smoothScrollTo (each scrollTo would animate, fighting the
     loop). We do our own easing in JS. */
}
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

::selection { background: var(--accent-soft); color: var(--text-primary); }

button, input, textarea {
  font-family: inherit;
  color: inherit;
}