/* Artisnotes design tokens. One place for every value the pages use.
   Layers: primitives (raw values) → semantic (what they mean) → components use semantic only.
   Dark is the default of this direction; light answers the system preference and swaps the semantic layer only. */
:root {
  /* primitives: colour */
  --p-black: #07080b; --p-ink-900: #0e1014; --p-ink-800: #14171c; --p-ink-700: #191c22; --p-ink-600: #242831; --p-ink-500: #363c47;
  --p-bone-100: #eef1f4; --p-bone-300: #c6ccd4; --p-bone-500: #a2aab4; --p-bone-700: #5f6873;
    --p-green-300: #7dff82; --p-green-400: #3cfa44; --p-green-600: #28a72d; --p-green-800: #18641b; --p-green-900: #0f4a14;
  --p-ice-300: #8fd3ff; --p-ice-600: #0b63c4; --p-teal-400: #2bd4a0;
  --p-red-400: #ff6b60; --p-red-600: #b3261e;
  --p-mint-400: #7fd99a; --p-mint-600: #156231;
  /* primitives: space (4 px grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  /* primitives: type (1.25 ratio from 16) */
  --t-xs: 13px; --t-sm: 16px; --t-md: 18px; --t-lg: 20px; --t-xl: 25px; --t-2xl: 31px; --t-3xl: 39px; --t-4xl: clamp(44px, 6vw, 61px); --t-5xl: clamp(48px, 8vw, 96px);
  --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.55;
  --track-tight: -0.03em; --track-wide: 0.08em;
  /* primitives: shape */
  --r-s: 6px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
  /* primitives: motion */
  --d-fast: 120ms; --d-base: 240ms; --d-slow: 600ms; --d-scene: 1200ms;
  --e-out: cubic-bezier(0.2, 0.7, 0.2, 1); --e-in-out: cubic-bezier(0.6, 0, 0.2, 1); --e-crash: cubic-bezier(0.1, 0.9, 0.2, 1);
  /* primitives: elevation */
  --el-1: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 10px 30px -20px rgba(0, 0, 0, 0.8);
  --el-2: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 40px 100px -40px rgba(0, 0, 0, 0.9);
  --el-accent: 0 10px 40px -12px rgba(60, 250, 68, 0.45);

  /* semantic: surfaces and text */
  --surface-0: #000000; --surface-1: #0b0d10; --surface-2: #14171c; --surface-3: #1d2128;
  --text-1: var(--p-bone-100); --text-2: var(--p-bone-500); --text-inverse: #000000;
  --border-1: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.16);
  /* semantic: accent, status */
  --accent: var(--p-green-400); --accent-hover: var(--p-green-300); --accent-deep: var(--p-green-600); --accent-ink: var(--text-inverse); --accent-rgb: 60, 250, 68; --accent-soft: rgba(60, 250, 68, 0.12);
  --leak-1: var(--p-ice-300); --leak-2: var(--p-teal-400); --leak-3: var(--p-green-400);
  --status-ok: var(--p-mint-400); --status-warn: var(--p-red-400);
  --lens: var(--p-green-400); --lens-5: var(--p-green-800);
  --focus: var(--p-ice-300);
  /* component sizes */
  color-scheme: dark;
  --control-h: 48px; --control-h-s: 40px; --hit: 44px;
}
@media (prefers-color-scheme: light) and (width < 0px) { /* light mode retired in v20 */
  :root {
    --surface-0: #f4f6f8; --surface-1: #eaeef2; --surface-2: #e1e6eb; --surface-3: #d5dbe2;
    --text-1: #14181d; --text-2: #59626d; --text-inverse: #ffffff;
    --border-1: rgba(0, 0, 0, 0.08); --border-2: rgba(0, 0, 0, 0.16);
    --accent: var(--p-green-800); --accent-hover: var(--p-green-900); --accent-deep: var(--p-green-900); --accent-rgb: 24, 100, 27; --accent-soft: rgba(24, 100, 27, 0.10);
    --status-ok: var(--p-mint-600); --status-warn: var(--p-red-600);
    --focus: var(--p-ice-600);
    --el-1: 0 10px 30px -20px rgba(0, 0, 0, 0.2); --el-2: 0 40px 100px -50px rgba(0, 0, 0, 0.35); --el-accent: 0 10px 30px -14px rgba(24, 100, 27, 0.45);
  }
}