/* =====================================================================
   Bluesys Lighting — theme.css
   Design tokens + base. Dark is default; [data-theme="light"] overrides.
   Ref: docs/02-design-system.md
   ===================================================================== */

:root,
:root[data-theme="dark"] {
  --bg: #0A0D12;
  --surface: #12161F;
  --surface-2: #1B212E;
  --line: #262D3B;
  --text: #EDEFF3;
  --muted: #8D96A8;

  /* brand accents — "the light" (shared across themes) */
  --cyan: #2FE6C9;
  --magenta: #E63E8C;
  --amber: #FFB13D;

  /* semantic */
  --success: #2FE6A8;
  --warning: #FFB13D;
  --danger: #F0576B;
  --info: #3DA9FF;

  /* layout tokens */
  --wrap: 1240px;
  --gutter: 24px;
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --section-y: 88px;

  --header-h: 76px;
  --header-h-scrolled: 60px;

  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-2: #EEF1F6;
  --line: #DCE1EA;
  --text: #10141B;
  --muted: #5A6474;
  color-scheme: light;
}

/* ---------- reset / base ---------- */
* { box-sizing: border-box; }
/* NOTE: no CSS `scroll-behavior: smooth` here — it fights GSAP ScrollTrigger
   pinning (causes jerky "jump up then snap back" scrolling). In-page anchor
   smoothing is handled in theme-toggle.js instead. */

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

/* ---------- type helpers ---------- */
.display {
  font-family: 'Big Shoulders Display', 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .95;
}
.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }
.muted { color: var(--muted); }
.accent-cyan { color: var(--cyan); }
.accent-magenta { color: var(--magenta); }
.accent-amber { color: var(--amber); }

/* signature tri-color gradient text */
.grad-text {
  background: linear-gradient(90deg, var(--cyan), var(--magenta) 55%, var(--amber));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- layout ---------- */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--section-y) 0; }
.section-tight { padding-top: 0; }

/* accent helper backgrounds used by chips/icons */
.bg-cyan-soft { background: rgba(47, 230, 201, .12); }
.bg-magenta-soft { background: rgba(230, 62, 140, .12); }
.bg-amber-soft { background: rgba(255, 177, 61, .12); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- responsive rhythm ---------- */
@media (max-width: 700px) {
  :root { --section-y: 56px; }
}