/* Design tokens. The single source of truth for colour, type, spacing and
   radii. Mirrors lib/theme/planar_tokens.dart in the app. Nothing else in
   the stylesheet uses a raw colour. */

:root {
  color-scheme: dark;

  /* Ink surfaces (PlanarPalette) */
  --ink-950: #0b0b0c;
  --ink-900: #161618;
  --ink-850: #1c1c1f;
  --ink-800: #1f1f22;
  --ink-750: #232326;
  --ink-700: #2a2a2e;
  --zinc-100: #f4f4f5;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-450: #8b8b93;
  --paper: #f7f6f2;
  --orange-500: #ff6a2c;
  --orange-400: #ff8a5c;
  --orange-600: #e8531a;
  --green-400: #4ade80;
  --amber-400: #fbbf24;
  --red-400: #ff6b6b;

  /* Semantic */
  --bg: var(--ink-950);
  --surface: var(--ink-900);
  --surface-raised: var(--ink-800);
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.16);
  --text: var(--zinc-100);
  --text-2: var(--zinc-400);
  --text-3: var(--zinc-450);
  --accent: var(--orange-500);
  --accent-soft: rgb(255 106 44 / 0.12);
  --accent-line: rgb(255 106 44 / 0.35);
  --accent-glow: rgb(255 106 44 / 0.4);
  --on-accent: #ffffff;
  --success: var(--green-400);
  --warning: var(--amber-400);
  --danger: var(--red-400);
  --glass: rgb(22 22 24 / 0.72);
  --glass-strong: rgb(28 28 31 / 0.84);

  /* Type */
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.3125rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 1.2rem + 2vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.4rem + 3.6vw, 3.625rem);
  --text-5xl: clamp(2.75rem, 1.6rem + 5vw, 4.25rem);
  --text-hero: clamp(3rem, 1.4rem + 7vw, 6rem);
  --leading-tight: 1.02;
  --leading-body: 1.55;

  /* Space and shape */
  --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: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --container: 75rem;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 30px 60px rgb(0 0 0 / 0.5);
  --shadow-phone: 0 50px 120px rgb(0 0 0 / 0.7);
  --shadow-accent: 0 12px 36px var(--accent-glow);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;
}