/*
  Design tokens.
  :root defines the "Studio" brand — the flagship look used on every page site-wide,
  and the default homepage style. The four alternate homepage styles (atelier, glass,
  editorial, playful) override this same variable set, scoped to
  `body.home-page[data-home-style="..."]`, so the header/nav/footer/buttons re-theme
  automatically whenever the homepage style switches. Inner pages never set
  data-home-style, so they always resolve to these defaults.
*/

:root {
  --surface: #fbfbf9;
  --surface-alt: #f1f1ec;
  --surface-elevated: #ffffff;
  --ink: #12131a;
  --ink-soft: #52566a;
  --ink-faint: #8b8fa3;
  --line: #e3e3dd;
  --line-strong: #cfcfc6;
  --accent: #3f4bff;
  --accent-strong: #2c34d6;
  --accent-soft: #eceeff;
  --on-accent: #ffffff;
  --danger: #d3413a;

  --font-display: "Space Grotesk", "Public Sans", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --border-w: 1px;

  --shadow-sm: 0 1px 2px rgba(18, 19, 26, 0.06), 0 1px 1px rgba(18, 19, 26, 0.04);
  --shadow-md: 0 12px 28px rgba(18, 19, 26, 0.08), 0 2px 8px rgba(18, 19, 26, 0.05);
  --shadow-lg: 0 24px 60px rgba(18, 19, 26, 0.12), 0 4px 16px rgba(18, 19, 26, 0.06);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-normal: 320ms;
  --dur-slow: 420ms;
  --dur-work-grow: 450ms;

  --container-max: 1180px;
  --container-pad: 24px;
}

[data-theme="dark"] {
  --surface: #0b0c10;
  --surface-alt: #101219;
  --surface-elevated: #15171f;
  --ink: #f3f4f8;
  --ink-soft: #aeb2c4;
  --ink-faint: #6d7186;
  --line: #23252f;
  --line-strong: #33364250;
  --accent: #7d8bff;
  --accent-strong: #97a2ff;
  --accent-soft: #1c2050;
  --on-accent: #0b0c10;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.32), 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-normal: 1ms;
    --dur-slow: 1ms;
    --dur-work-grow: 1ms;
  }
}