:root {
  /* Radius */
  --radius: 10px;

  /* Surface system */
  --surface-page: #f8f8f8;
  --surface-panel: #ffffff;
  --surface-item: #f2f2f2;
  --surface-hover: #eaeaea;

  /* Text */
  --text: #444444;
  --text-strong: #111111;
  --text-muted: #888888;

  /* Borders */
  --border: #dddddd;

  /* Accent */
  --accent: #aa3bff;
  --accent-soft: rgba(170, 59, 255, 0.1);

  /* Shadows */
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* App base */
  color: var(--text);
  background: var(--surface-page);
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface-page: #1a1a1a;
    --surface-panel: #252525ee;
    --surface-item: #383838bc;
    --surface-hover: #505050;

    --text: #dddddd;
    --text-strong: #ffffff;
    --text-muted: #aaaaaa;

    --border: #3a3a3a;

    --accent: #c084fc;
    --accent-soft: rgba(192, 132, 252, 0.15);

    --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.5);
  }
}