:root {
  --font-sans: 'Roboto', 'Segoe UI', sans-serif;
  --font-display: 'Google Sans', 'Roboto', sans-serif;

  --color-bg: #ffffff;
  --color-surface: #f1f3f4;
  --color-surface-hover: #e8eaed;
  --color-border: #dadce0;
  --color-text: #202124;
  --color-text-secondary: #5f6368;
  --color-primary: #1a73e8;
  --color-primary-hover: #1765cc;
  --color-danger: #d93025;
  --color-shadow: rgba(60, 64, 67, 0.15);
  --color-shadow-heavy: rgba(60, 64, 67, 0.3);

  --header-height: 64px;
  --sidebar-width: 280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --note-default: #ffffff;
  --note-coral: #f28b82;
  --note-peach: #fbbc04;
  --note-sand: #fff475;
  --note-mint: #ccff90;
  --note-sage: #a7ffeb;
  --note-fog: #cbf0f8;
  --note-storm: #aecbfa;
  --note-dusk: #d7aefb;
  --note-blossom: #fdcfe8;
  --note-clay: #e6c9a8;
  --note-chalk: #e8eaed;
}

[data-theme="dark"] {
  --color-bg: #202124;
  --color-surface: #292a2d;
  --color-surface-hover: #3c4043;
  --color-border: #5f6368;
  --color-text: #e8eaed;
  --color-text-secondary: #9aa0a6;
  --color-shadow: rgba(0, 0, 0, 0.3);
  --color-shadow-heavy: rgba(0, 0, 0, 0.5);

  --note-default: #292a2d;
  --note-coral: #77172e;
  --note-peach: #692b17;
  --note-sand: #7c4a03;
  --note-mint: #264d3b;
  --note-sage: #0d652d;
  --note-fog: #1e3a5f;
  --note-storm: #1a3a6e;
  --note-dusk: #4a148c;
  --note-blossom: #6c2b5c;
  --note-clay: #5c4a32;
  --note-chalk: #3c4043;
}