/* ===== Half Studio Design Tokens ===== */
:root {
  /* Base palette - Ivory + Ink */
  --ivory: #F5F1E8;
  --ivory-2: #EDE7D7;
  --ivory-3: #E4DCC6;
  --ink: #0A0A0A;
  --ink-2: #1C1C1A;
  --ink-3: #2A2A26;
  --muted: #77736A;
  --line: #1C1C1A;
  --line-soft: rgba(10,10,10,0.12);

  /* Locked accent */
  --accent-rust: oklch(0.62 0.15 45);

  /* Current theme bindings (overridden by tweaks) */
  --bg: var(--ivory);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --accent: var(--accent-rust);
  --accent-fg: #F5F1E8;

  /* Type */
  --font-serif: 'Instrument Serif', 'Source Han Serif SC', 'Noto Serif SC', 'Songti SC', serif;
  --font-sans:  'Space Grotesk', 'Source Han Sans SC', 'Noto Sans SC', 'PingFang SC', sans-serif;
  --font-mono:  'JetBrains Mono', 'Sarasa Mono SC', 'Menlo', monospace;
  --font-body:  var(--font-serif);
  --font-display: var(--font-serif);

  /* Motion */
  --motion: 1;
  --ease-brand: cubic-bezier(0.2, 0.7, 0.1, 1);

  /* Spacing scale */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 160px;
}

[data-font="serif"] { --font-body: var(--font-serif); --font-display: var(--font-serif); }

[data-theme="dark"] {
  --bg: var(--ink);
  --fg: var(--ivory);
  --fg-muted: #8C8880;
  --line: #EDE7D7;
  --line-soft: rgba(245,241,232,0.12);
  --accent-fg: var(--ink);
}

[data-accent="rust"] { --accent: var(--accent-rust); }

[data-motion="strong"] { --motion: 1; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 400ms var(--ease-brand), color 400ms var(--ease-brand);
  overflow-x: hidden;
  cursor: none;
}
@media (max-width: 900px) {
  body { cursor: auto; }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: none; }
::selection { background: var(--fg); color: var(--bg); }

/* Utility */
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.serif { font-family: var(--font-serif); }
.muted { color: var(--fg-muted); }
.hairline { height: 1px; background: var(--line); width: 100%; }
.hairline-soft { height: 1px; background: var(--line-soft); width: 100%; }

/* Magnetic cursor */
.cursor {
  position: fixed; top: 0; left: 0;
  width: 10px; height: 10px;
  background: var(--fg);
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
  transition: width 300ms var(--ease-brand), height 300ms var(--ease-brand), transform 80ms linear;
  transform: translate(-50%, -50%);
}
.cursor.hover { width: 48px; height: 48px; }
.cursor-label {
  position: fixed; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  mix-blend-mode: difference;
  pointer-events: none; z-index: 10001;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms;
}
.cursor-label.show { opacity: 1; }
@media (max-width: 900px) { .cursor, .cursor-label { display: none; } }

/* Noise */
.noise::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-soft); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(calc(24px * var(--motion))); transition: opacity 800ms var(--ease-brand), transform 800ms var(--ease-brand); }
.reveal.in { opacity: 1; transform: translateY(0); }