/* ============================================================================
   CSS VARIABLES & BASE STYLES
   Running Circles - Circular Daily Routine Planner
   ============================================================================ */

:root {
  /* Typography */
  font-family: Inter, sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;

  /* Layout dimensions */
  --circle-size: 96vw;
  --circle-max-size: 80svh;
  --center-position: 50svh;
  --selector-size: 28px;
  --hour-hand-width: 49.5vw;
  --hour-hand-max-width: 41svh;

  /* Spacing */
  --gap-tiny: 4px;
  --gap-small: 8px;
  --gap-medium: 12px;
  --gap-large: 28px;
  --border-radius-small: 2px;
  --border-radius-full: 50%;

  /* Typography sizes */
  --font-size-activity: 17px;
  --font-size-hour: 11px;
  --font-size-selector: 14px;
  --font-weight-normal: 500;
  --font-weight-light: 300;

  /* Light theme colors */
  --background: #eee;
  --background-hover: #c5c5c5;
  --empty-sector: #ddd;
  --text-primary: #555;
  --text-secondary: #777;
  --border: #ddd;
  --accent: #333;
  --weekday-selector: #ccc;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #303030;
    --background-hover: #555;
    --empty-sector: #444;
    --text-primary: #ddd;
    --text-secondary: #888;
    --border: #444;
    --accent: #fff;
    --weekday-selector: #555;
  }
}