:root,
:root[data-theme="system"],
:root[data-theme="light"] {
  --font-display: "Aptos Display", "Segoe UI", Georgia, serif;
  --font-body: "Segoe UI", "Aptos", "Helvetica Neue", sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;

  --color-page: #f7f5ee;
  --color-page-soft: #fbfaf6;
  --color-ink: #172235;
  --color-heading: #101827;
  --color-muted: #647084;
  --color-subtle: #8a94a6;
  --color-card: #fffdf8;
  --color-card-solid: #fffdf8;
  --color-surface: #ffffff;
  --color-surface-muted: #f1f4f2;
  --color-border: #d9dfd9;
  --color-border-strong: #c4cdc7;
  --color-primary: #28666e;
  --color-primary-dark: #1d4d54;
  --color-primary-soft: #e2eff0;
  --color-accent: #8a6f3d;
  --color-accent-soft: #f3ebd7;
  --color-danger: #a0443e;
  --color-danger-soft: #f9e7e4;
  --color-success: #2f6d4f;
  --color-success-soft: #e4f1e9;
  --color-warning: #9a6a15;
  --color-warning-soft: #f8efd9;

  --shadow-soft: 0 18px 44px rgba(30, 45, 62, 0.08);
  --shadow-tight: 0 8px 22px rgba(30, 45, 62, 0.07);
  --shadow-card: 0 1px 2px rgba(30, 45, 62, 0.05), 0 10px 28px rgba(30, 45, 62, 0.06);

  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --radius-xs: 7px;

  --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;
  --content-max: 1440px;
}

:root[data-accent="amber"] {
  --color-primary: #8a6333;
  --color-primary-dark: #60431f;
  --color-primary-soft: #f2eadf;
  --color-accent: #b57b24;
  --color-accent-soft: #f7ead3;
}

:root[data-accent="blue"] {
  --color-primary: #2b5f82;
  --color-primary-dark: #1d4663;
  --color-primary-soft: #e4eef5;
  --color-accent: #527b9c;
  --color-accent-soft: #e9f1f7;
}

:root[data-font-size="compact"] {
  font-size: 14px;
}

:root[data-font-size="large"] {
  font-size: 18px;
}

:root[data-compact="true"] {
  --space-4: 0.8rem;
  --space-5: 1rem;
  --space-6: 1.2rem;
  --space-8: 1.6rem;
  --radius-xl: 20px;
  --radius-lg: 15px;
}

:root[data-theme="dark"] {
  --color-page: #111827;
  --color-page-soft: #151f2d;
  --color-ink: #e7edf5;
  --color-heading: #f8fafc;
  --color-muted: #a8b4c4;
  --color-subtle: #8a99aa;
  --color-card: #192334;
  --color-card-solid: #192334;
  --color-surface: #1f2b3d;
  --color-surface-muted: #202d3f;
  --color-border: #334155;
  --color-border-strong: #475569;
  --color-primary: #8fcbd2;
  --color-primary-dark: #caeef2;
  --color-primary-soft: rgba(143, 203, 210, 0.16);
  --color-accent: #d8bd79;
  --color-accent-soft: rgba(216, 189, 121, 0.14);
  --color-danger: #f2a19b;
  --color-danger-soft: rgba(242, 161, 155, 0.13);
  --color-success: #9bd6b4;
  --color-success-soft: rgba(155, 214, 180, 0.13);
  --color-warning: #e1c170;
  --color-warning-soft: rgba(225, 193, 112, 0.13);
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.24);
  --shadow-tight: 0 8px 24px rgba(0, 0, 0, 0.22);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 14px 32px rgba(0, 0, 0, 0.2);
}