:root {
  --font-app: Nunito, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-bg: #f2f7f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f4f9f8;
  --color-input: #eef5f4;
  --color-text: #1a2b28;
  --color-muted: #7a9490;
  --color-border: #e0edeb;
  --color-teal: #1bbeaa;
  --color-yellow: #ffd32d;
  --color-note-accent: var(--color-yellow);
  --color-note-ink: #7a5c00;
  --color-note-text: #5a4400;
  --color-note-surface: #fffbea;
  --color-note-input: #fff7c7;
  --color-note-border: color-mix(in srgb, var(--color-yellow), transparent 60%);
  --color-green: #5cb85c;
  --color-danger: #e12646;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 2px 10px rgb(0 0 0 / 6%);
  --sidebar-width: 230px;
  --tabbar-height: 72px;
  --mobile-navigation-item-height: 54px;
  --mobile-navigation-top-gap: 6px;
  --mobile-navigation-safe-gap: max(10px, var(--safe-bottom));
  --mobile-navigation-height: calc(var(--mobile-navigation-item-height) + var(--mobile-navigation-top-gap) + var(--mobile-navigation-safe-gap));
  --content-width: 760px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --color-bg: #0e1f1c;
  --color-surface: #162622;
  --color-surface-alt: #1a2e2b;
  --color-input: #1a2e2b;
  --color-text: #e8f4f1;
  --color-muted: #5e8178;
  --color-border: #1e3530;
  --color-note-ink: #ffd32d;
  --color-note-text: #e8d88a;
  --color-note-surface: #2a2200;
  --color-note-input: #3a3008;
  --color-note-border: color-mix(in srgb, var(--color-yellow), transparent 55%);
  --shadow-card: 0 2px 12px rgb(0 0 0 / 30%);
  color-scheme: dark;
}