:root {
  color-scheme: light dark;

  --ease: cubic-bezier(.4,0,.2,1);
  --motion-fast: 150ms var(--ease);
  --motion-normal: 250ms var(--ease);
  --motion-slow: 400ms var(--ease);

  --bg: #ffffff;
  --text: #111111;
  --text-secondary: #444444;
  --text-tertiary: #666666;

  --card-bg: #fafafa;
  --card-hover: #f4f4f4;

  --border: #e7e7e7;
  --border-hover: #d1d1d1;
  --border-focus: #9f9f9f;
  --divider: #e7e7e7;

  --accent: #16a34a;
  --accent-bg: #dcfce7;
  --accent-border: #86efac;

  --button-bg: #1a1a1a;
  --button-text: #ffffff;
  --button-hover: #000000;

  --icon-filter: invert(0%) brightness(0%);

  --error: #b91c1c;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[data-theme="dark"] {
  --bg: #0a0a0a;
  --text: #f0f0f0;
  --text-secondary: #cccccc;
  --text-tertiary: #bbbbbb;

  --card-bg: #121212;
  --card-hover: #161616;

  --border: #1c1c1c;
  --border-hover: #2a2a2a;
  --border-focus: #444444;
  --divider: #1c1c1c;

  --accent: #4ade80;
  --accent-bg: #0f2a1a;
  --accent-border: #1a4d2e;

  --button-bg: #e5e5e5;
  --button-text: #0a0a0a;
  --button-hover: #f5f5f5;

  --icon-filter: invert(100%) brightness(100%);
}

html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}