/* Hallmark · tokens: Constellation Stage · Nebula Web · anchors: red 28, blue 248, violet 300 */

:root {
  /* --- color --- */
  --color-space-900: oklch(9% 0.045 285);
  --color-space-800: oklch(15% 0.055 285);
  --color-space-700: oklch(24% 0.065 285);
  --color-space-600: oklch(34% 0.07 285);
  --color-web-red: oklch(58% 0.23 28);
  --color-web-red-bright: oklch(69% 0.25 28);
  --color-web-blue: oklch(63% 0.19 248);
  --color-web-blue-bright: oklch(76% 0.16 248);
  --color-nebula-violet: oklch(64% 0.21 300);
  --color-nebula-magenta: oklch(66% 0.25 345);
  --color-nebula-cyan: oklch(80% 0.12 230);
  --color-lens: oklch(98% 0.012 250);
  --color-ink: oklch(22% 0.025 280);
  --color-text-bright: oklch(96% 0.012 265);
  --color-text-dim: oklch(78% 0.045 265);
  --color-text-faint: oklch(62% 0.05 265);
  --color-focus: oklch(78% 0.16 248);

  /* --- type --- */
  --font-display: "ZCOOL KuaiLe", "Noto Sans SC", sans-serif;
  --font-logo: "Bangers", "Arial Black", "Noto Sans SC", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  /* --- spacing (4pt) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- text --- */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --text-display-s: clamp(2.2rem, 7vw, 3.4rem);
  --text-display: clamp(2.8rem, 9vw, 4.8rem);

  /* --- motion --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 560ms;
  --dur-ambient: 9000ms;

  /* --- shape --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  /* --- rules --- */
  --rule-hair: 1px solid color-mix(in oklch, var(--color-text-dim) 28%, transparent);
  --rule-glow: 1px solid color-mix(in oklch, var(--color-nebula-violet) 45%, transparent);
}