/* Bazzr Studio design tokens. See docs/design-system.md for the reasoning. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/geist-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
}

:root {
  /* Colour: a deep ink stage lit by Bazzr cobalt. Orange means money and nothing else. */
  --ink: #05081c;
  --ink-raised: #0a0f2c;
  --cobalt: #1535cc;
  --electric: #3d6bff;
  --sky: #8da5fd;
  --tint: #dce4ff;
  --money: #f1471e;

  --text: #eef2ff;
  --text-2: #b0bedf;
  --text-3: #8492b8;
  --hairline: rgba(220, 228, 255, 0.1);
  --hairline-strong: rgba(220, 228, 255, 0.2);
  --glass: rgba(220, 228, 255, 0.045);

  /* The light objects that sit on the stage: product windows and the plan sheet. */
  --paper: #f4f6fa;
  --white: #ffffff;
  --navy: #0a0f2c;
  --ink-soft: #414b70;
  --rule: #dfe5f2;
  --error: #ffb4a1;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-micro: 0.8125rem;
  --text-small: 0.875rem;
  --text-body: 1.0625rem;
  --text-lead: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
  --text-h3: 1.375rem;
  --text-h2: clamp(2.1rem, 1.3rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.4rem, 0.6rem + 4.4vw, 4.75rem);
  --measure: 65ch;

  /* Spacing: one scale, each step roughly 1.5 times the last. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --band: clamp(4rem, 7vw, 6.5rem);
  --max: 82rem;

  /* Radii: an outer shell and a concentric inner core, plus pills for controls. */
  --bezel: 0.5rem;
  --radius-shell: 2rem;
  --radius-core: calc(var(--radius-shell) - var(--bezel));
  --radius-control: 0.875rem;
  --radius-pill: 999px;

  /* Shadows are soft and tinted with the stage colour, never plain black. */
  --shadow-float: 0 3rem 6rem -2rem rgba(2, 4, 20, 0.8), 0 1rem 2.5rem -1rem rgba(21, 53, 204, 0.35);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Motion: one heavy, spring-like curve for everything. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --slow: 0.9s;
  --quick: 0.45s;
}