:root {
  /* Raw color palette */
  --oi-cream-0: #fffdf5;
  --oi-cream-1: #fcefc4;
  --oi-cream-2: #f2dfa0;
  --oi-ink-1: #18372a;
  --oi-ink-2: #3c5b49;
  --oi-ink-3: #6b7f70;
  --oi-yellow-1: #ffe43e;
  --oi-yellow-2: #d8bc25;
  --oi-orange-1: #c99a25;
  --oi-orange-2: #8f6d1d;
  --oi-coral-1: #e6c65a;
  --oi-sage-1: #dcebd8;
  --oi-mint-1: #cfe4d3;
  --oi-cyan-1: #e7efe3;
  --oi-teal-1: #479f6b;
  --oi-teal-2: #2f6f4c;
  --oi-white: #ffffff;

  /* Semantic colors */
  --surface-page: var(--oi-cream-1);
  --surface-paper: color-mix(in srgb, var(--oi-white) 78%, transparent);
  --surface-raised: color-mix(in srgb, var(--oi-white) 72%, transparent);
  --surface-map: color-mix(in srgb, var(--oi-cream-1) 62%, var(--oi-white));
  --surface-highlight: color-mix(in srgb, var(--oi-yellow-1) 23%, var(--oi-white));
  --fg-primary: var(--oi-ink-1);
  --fg-secondary: var(--oi-ink-2);
  --fg-muted: var(--oi-ink-3);
  --accent-primary: var(--oi-teal-1);
  --accent-strong: var(--oi-teal-2);
  --accent-soft: var(--oi-yellow-1);
  --accent-route: var(--oi-teal-1);
  --state-fresh: var(--oi-sage-1);
  --border-strong: color-mix(in srgb, var(--oi-ink-1) 78%, transparent);
  --border-subtle: color-mix(in srgb, var(--oi-teal-2) 22%, transparent);

  /* Type */
  --font-display: "LXGW WenKai", "STKaiti", "KaiTi", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 700;
  --type-xs: 0.72rem;
  --type-sm: 0.84rem;
  --type-body: clamp(0.94rem, 0.9rem + 0.18vw, 1.05rem);
  --type-h3: clamp(1.08rem, 0.94rem + 0.7vw, 1.42rem);
  --type-h2: clamp(1.55rem, 1.2rem + 1.5vw, 2.35rem);
  --type-h1: clamp(2.35rem, 1.7rem + 3vw, 4.4rem);
  --body: var(--weight-regular) var(--type-body) / 1.72 var(--font-body);
  --caption: var(--weight-medium) var(--type-xs) / 1.45 var(--font-mono);
  --h3: var(--weight-bold) var(--type-h3) / 1.25 var(--font-display);
  --h2: var(--weight-bold) var(--type-h2) / 1.16 var(--font-display);
  --h1: var(--weight-bold) var(--type-h1) / 1.02 var(--font-display);

  /* 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;
  --radius-sm: 0.38rem;
  --radius-md: 0.65rem;
  --radius-lg: 0.9rem;
  --radius-round: 999px;
  --shadow-paper: 0 18px 48px color-mix(in srgb, var(--oi-teal-2) 13%, transparent);
  --shadow-node: 0 14px 36px color-mix(in srgb, var(--oi-teal-2) 15%, transparent);

  /* Motion */
  --ease-bounce-soft: cubic-bezier(0.2, 0.82, 0.2, 1.18);
  --ease-map: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-map: 620ms;
}