:root,
:root[data-theme] {
  --x-font-body: "Trebuchet MS", "Malgun Gothic", sans-serif;
  --x-font-heading: Georgia, "Times New Roman", serif;
  --x-font-mono: Consolas, "Courier New", monospace;

  --x-bg: #f6f4ee;
  --x-surface: #fffdf7;
  --x-surface-raised: #ffffff;
  --x-text: #20231f;
  --x-muted: #667067;
  --x-primary: #176b4d;
  --x-primary-hover: #10543c;
  --x-primary-contrast: #ffffff;
  --x-border: #d8d8cd;
  --x-focus: #f0a629;
  --x-success: #247a52;
  --x-warning: #a35f00;
  --x-danger: #b42318;
  --x-info: #176b87;

  --x-radius-sm: 0.35rem;
  --x-radius-md: 0.75rem;
  --x-radius-lg: 1.25rem;
  --x-shadow-sm: 0 1px 2px rgb(20 30 24 / 0.08);
  --x-shadow-md: 0 12px 32px rgb(20 30 24 / 0.14);
  --x-shadow-lg: 0 24px 70px rgb(20 30 24 / 0.22);
  --x-duration-fast: 120ms;
  --x-duration-normal: 220ms;
  --x-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --x-space-1: 0.25rem;
  --x-space-2: 0.5rem;
  --x-space-3: 0.75rem;
  --x-space-4: 1rem;
  --x-space-5: 1.5rem;
  --x-space-6: 2rem;
  --x-space-7: 3rem;
  --x-control-height: 2.75rem;
  --x-page-width: 96rem;
  --x-sidebar-width: 18rem;

  --x-z-dropdown: 300;
  --x-z-sticky: 400;
  --x-z-drawer: 600;
  --x-z-dialog: 700;
  --x-z-toast: 800;

  --pico-font-family: var(--x-font-body);
  --pico-background-color: var(--x-bg);
  --pico-color: var(--x-text);
  --pico-muted-color: var(--x-muted);
  --pico-primary: var(--x-primary);
  --pico-primary-hover: var(--x-primary-hover);
  --pico-primary-background: var(--x-primary);
  --pico-primary-border: var(--x-primary);
  --pico-primary-hover-background: var(--x-primary-hover);
  --pico-primary-hover-border: var(--x-primary-hover);
  --pico-primary-focus: color-mix(in srgb, var(--x-focus) 45%, transparent);
  --pico-primary-inverse: var(--x-primary-contrast);
  --pico-card-background-color: var(--x-surface);
  --pico-card-border-color: var(--x-border);
  --pico-form-element-background-color: var(--x-surface);
  --pico-form-element-color: var(--x-text);
  --pico-form-element-placeholder-color: var(--x-muted);
  --pico-form-element-border-color: var(--x-border);
  --pico-form-element-focus-color: var(--x-focus);
  --pico-muted-border-color: var(--x-border);
  --pico-secondary: var(--x-muted);
  --pico-secondary-hover: var(--x-text);
  --pico-contrast: var(--x-text);
  --pico-contrast-inverse: var(--x-bg);
  --pico-border-radius: var(--x-radius-sm);
  --pico-spacing: var(--x-space-4);
}

:root[data-density="compact"] {
  --x-space-1: 0.2rem;
  --x-space-2: 0.35rem;
  --x-space-3: 0.55rem;
  --x-space-4: 0.75rem;
  --x-space-5: 1rem;
  --x-space-6: 1.5rem;
  --x-space-7: 2rem;
  --x-control-height: 2.25rem;
}

:root[data-density="roomy"] {
  --x-space-1: 0.35rem;
  --x-space-2: 0.7rem;
  --x-space-3: 1rem;
  --x-space-4: 1.3rem;
  --x-space-5: 2rem;
  --x-space-6: 2.75rem;
  --x-space-7: 4rem;
  --x-control-height: 3.25rem;
}