:root {
  color-scheme: light;

  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-text: "Manrope", "Avenir Next", sans-serif;
  --font-data: "DM Mono", "SFMono-Regular", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.6;

  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --size-hairline: 0.0625rem;
  --size-focus: 0.1875rem;
  --size-icon-sm: 1rem;
  --size-icon: 1.25rem;
  --size-control: 2.75rem;
  --size-avatar: 2rem;
  --size-logo: 2rem;
  --size-sidebar: 14.5rem;
  --size-topbar: 4.5rem;
  --size-content: 78rem;
  --size-auth-card: 31rem;
  --size-palette: 40rem;
  --size-admin-content: 92rem;
  --size-admin-table: 54rem;
  --size-admin-table-wide: 72rem;
  --size-status-dot: 0.5rem;
  --size-panel-accent: 0.25rem;
  --size-copy: 68ch;
  --size-copy-compact: 52ch;
  --size-onboarding: 76rem;
  --size-wizard-rail: 19rem;
  --size-orbit: 11rem;
  --size-code-block: 24rem;
  --size-copy-wide: 82ch;
  --size-table-pipeline: 70rem;
  --size-table-keywords: 58rem;
  --size-table-pages: 64rem;
  --size-table-portfolio: 84rem;
  --size-market-code: 2.5rem;
  --size-chart: 11rem;
  --size-detail-panel: 24rem;
  --size-spinner: 1.125rem;
  --size-button-shift: 0.0625rem;
  --size-skip-offset: -8rem;

  --radius-xs: 0.375rem;
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999rem;

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 240ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  --color-canvas: #f2f1eb;
  --color-canvas-soft: #e8e8e0;
  --color-surface: #fffef9;
  --color-surface-raised: #ffffff;
  --color-surface-inverse: #14231f;
  --color-ink: #18211f;
  --color-ink-soft: #4e5b57;
  --color-ink-faint: #68746f;
  --color-ink-inverse: #f4f7f0;
  --color-border: #ced3cb;
  --color-border-strong: #9fa9a2;
  --color-accent: #135c45;
  --color-accent-hover: #0b4634;
  --color-accent-soft: #dff1e9;
  --color-highlight: #d7f36b;
  --color-highlight-ink: #20300d;
  --color-success: #176746;
  --color-success-soft: #dff3e8;
  --color-warning: #79520b;
  --color-warning-soft: #fff0c7;
  --color-warning: #735715;
  --color-warning-soft: #f5edc9;
  --color-error: #a33131;
  --color-error-soft: #f8e4df;
  --color-warning: #7a5010;
  --color-warning-soft: #faedcb;
  --color-code: #0c1815;
  --color-focus: #176fdb;
  --color-backdrop: rgb(13 22 19 / 72%);
  --color-shadow: rgb(22 31 28 / 10%);
  --color-shadow-deep: rgb(22 31 28 / 18%);
  --color-grid: rgb(255 255 255 / 8%);
  --color-transparent: rgb(0 0 0 / 0%);

  --shadow-sm: 0 0.0625rem 0.125rem var(--color-shadow);
  --shadow-md: 0 0.75rem 2rem var(--color-shadow);
  --shadow-lg: 0 1.5rem 4rem var(--color-shadow-deep);
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: #101614;
  --color-canvas-soft: #151d1a;
  --color-surface: #19221f;
  --color-surface-raised: #202b27;
  --color-surface-inverse: #e6eee9;
  --color-ink: #eef3ef;
  --color-ink-soft: #b6c1bb;
  --color-ink-faint: #9aa7a0;
  --color-ink-inverse: #17201d;
  --color-border: #3b4943;
  --color-border-strong: #617169;
  --color-accent: #9bdec0;
  --color-accent-hover: #c0ecd8;
  --color-accent-soft: #213e33;
  --color-highlight: #cce85f;
  --color-highlight-ink: #172107;
  --color-success: #8ed8b4;
  --color-success-soft: #1c3a2e;
  --color-warning: #ffd27a;
  --color-warning-soft: #403318;
  --color-warning: #f1d77a;
  --color-warning-soft: #3b351d;
  --color-error: #ffaaa0;
  --color-error-soft: #462a28;
  --color-warning: #f4c56b;
  --color-warning-soft: #3f3422;
  --color-code: #0b100e;
  --color-focus: #78b7ff;
  --color-backdrop: rgb(1 5 3 / 82%);
  --color-shadow: rgb(0 0 0 / 24%);
  --color-shadow-deep: rgb(0 0 0 / 42%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: #101614;
    --color-canvas-soft: #151d1a;
    --color-surface: #19221f;
    --color-surface-raised: #202b27;
    --color-surface-inverse: #e6eee9;
    --color-ink: #eef3ef;
    --color-ink-soft: #b6c1bb;
    --color-ink-faint: #9aa7a0;
    --color-ink-inverse: #17201d;
    --color-border: #3b4943;
    --color-border-strong: #617169;
    --color-accent: #9bdec0;
    --color-accent-hover: #c0ecd8;
    --color-accent-soft: #213e33;
    --color-highlight: #cce85f;
    --color-highlight-ink: #172107;
    --color-success: #8ed8b4;
    --color-success-soft: #1c3a2e;
    --color-warning: #ffd27a;
    --color-warning-soft: #403318;
    --color-warning: #f1d77a;
    --color-warning-soft: #3b351d;
    --color-error: #ffaaa0;
    --color-error-soft: #462a28;
    --color-warning: #f4c56b;
    --color-warning-soft: #3f3422;
    --color-code: #0b100e;
    --color-focus: #78b7ff;
    --color-backdrop: rgb(1 5 3 / 82%);
    --color-shadow: rgb(0 0 0 / 24%);
    --color-shadow-deep: rgb(0 0 0 / 42%);
  }
}