:root {
  color-scheme: light;

  --app-font-sans: "Manrope", "Segoe UI", sans-serif;
  --app-font-mono: "JetBrains Mono", "Consolas", monospace;

  --app-bg: #f7f8f5;
  --app-surface: #ffffff;
  --app-surface-muted: #f0f3ed;
  --app-sidebar-bg: #171915;
  --app-topbar-bg: rgba(247, 248, 245, 0.86);
  --app-fg: #151815;
  --app-fg-muted: #5d665d;
  --app-fg-soft: #899187;
  --app-border: #dde4d8;
  --app-border-strong: #bac8b7;
  --app-accent: #9a5c2e;
  --app-accent-rgb: 154, 92, 46;
  --app-accent-foreground: #fffaf3;
  --app-success: #237a54;
  --app-success-rgb: 35, 122, 84;
  --app-warning: #b8782d;
  --app-warning-rgb: 184, 120, 45;
  --app-danger: #bf4f3d;
  --app-danger-rgb: 191, 79, 61;
  --app-info: #2f7486;
  --app-info-rgb: 47, 116, 134;
  --app-focus-ring: rgba(154, 92, 46, 0.23);

  --app-sidebar-fg: #f7f2ea;
  --app-sidebar-muted: #bcb7ad;
  --app-sidebar-active: #fff0dc;
  --app-sidebar-active-fg: #221a13;

  --app-shadow-sm: 0 1px 2px rgba(21, 24, 21, 0.05), 0 12px 28px rgba(31, 43, 28, 0.07);
  --app-shadow-md: 0 1px 2px rgba(21, 24, 21, 0.06), 0 24px 58px rgba(31, 43, 28, 0.12);
  --app-shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.24);

  --app-radius-xs: 4px;
  --app-radius-sm: 6px;
  --app-radius: 8px;
  --app-sidebar-width: 272px;
  --app-topbar-height: 76px;
  --app-control-height: 38px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --app-bg: #111310;
  --app-surface: #191b17;
  --app-surface-muted: #23261f;
  --app-sidebar-bg: #090a08;
  --app-topbar-bg: rgba(17, 19, 16, 0.92);
  --app-fg: #f0eee7;
  --app-fg-muted: #b6baae;
  --app-fg-soft: #8c9384;
  --app-border: #30362c;
  --app-border-strong: #4a5245;
  --app-accent: #d19a62;
  --app-accent-rgb: 209, 154, 98;
  --app-accent-foreground: #1e1209;
  --app-success: #55c489;
  --app-success-rgb: 85, 196, 137;
  --app-warning: #e0ae5e;
  --app-warning-rgb: 224, 174, 94;
  --app-danger: #e56f61;
  --app-danger-rgb: 229, 111, 97;
  --app-info: #74b5c5;
  --app-info-rgb: 116, 181, 197;
  --app-focus-ring: rgba(209, 154, 98, 0.32);

  --app-sidebar-fg: #f0eee7;
  --app-sidebar-muted: #9b9e93;
  --app-sidebar-active: #3a2a1d;
  --app-sidebar-active-fg: #fff4e8;

  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 28px rgba(0, 0, 0, 0.22);
  --app-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.25), 0 24px 58px rgba(0, 0, 0, 0.32);
  --app-shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;

    --app-bg: #111310;
    --app-surface: #191b17;
    --app-surface-muted: #23261f;
    --app-sidebar-bg: #090a08;
    --app-topbar-bg: rgba(17, 19, 16, 0.92);
    --app-fg: #f0eee7;
    --app-fg-muted: #b6baae;
    --app-fg-soft: #8c9384;
    --app-border: #30362c;
    --app-border-strong: #4a5245;
    --app-accent: #d19a62;
    --app-accent-rgb: 209, 154, 98;
    --app-accent-foreground: #1e1209;
    --app-success: #55c489;
    --app-success-rgb: 85, 196, 137;
    --app-warning: #e0ae5e;
    --app-warning-rgb: 224, 174, 94;
    --app-danger: #e56f61;
    --app-danger-rgb: 229, 111, 97;
    --app-info: #74b5c5;
    --app-info-rgb: 116, 181, 197;
    --app-focus-ring: rgba(209, 154, 98, 0.32);
    --app-sidebar-fg: #f0eee7;
    --app-sidebar-muted: #9b9e93;
    --app-sidebar-active: #3a2a1d;
    --app-sidebar-active-fg: #fff4e8;
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 12px 28px rgba(0, 0, 0, 0.22);
    --app-shadow-md: 0 1px 2px rgba(0, 0, 0, 0.25), 0 24px 58px rgba(0, 0, 0, 0.32);
    --app-shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  }
}