:root {
  --color-paper: #0f1115;
  --color-paper-2: #171b22;
  --color-panel: #1d2330;
  --color-panel-2: #252c3a;
  --color-ink: #f3f5f7;
  --color-ink-2: #a4acb9;
  --color-rule: #313949;
  --color-accent: #8fa2ff;
  --color-accent-ink: #0f1115;
  --color-focus: #b7c2ff;
  --color-success: #7fa68a;
  --color-danger: #c67b7b;

  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-body: "Plus Jakarta Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.75rem;
  --space-3xl: 5rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.55rem;
  --text-2xl: 2.05rem;
  --text-display: clamp(2.75rem, 5.8vw, 4.85rem);
  --text-display-s: clamp(1.95rem, 3.6vw, 3rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --dur-short: 160ms;
  --dur-base: 220ms;

  --rule-width: 1px;
  --radius-input: 0.8rem;
  --radius-card: 1rem;
  --radius-pill: 999px;
  --shadow-soft: 0 18px 40px rgba(4, 8, 16, 0.28);
}

html[data-theme="light"] {
  --color-paper: #f5f7fa;
  --color-paper-2: #eef2f7;
  --color-panel: #ffffff;
  --color-panel-2: #e6ebf2;
  --color-ink: #11151b;
  --color-ink-2: #5f6978;
  --color-rule: #d6dce5;
  --color-accent: #5167d9;
  --color-accent-ink: #f5f7fa;
  --color-focus: #7d90f0;
  --shadow-soft: 0 16px 32px rgba(15, 17, 21, 0.08);
}