/* ============================================================
   🎨  THEME  🎨
   This is the FUN file. Change colors, fonts, and sizes here!

   HOW IT WORKS:
   - Every line below sets a value, like   --primary: #6366f1;
   - The part after the ":" is what you change.
   - The "#" part is a color code. You can pick a color at
       https://htmlcolorcodes.com/color-picker/
     and paste the code (looks like #ff6b6b) here.
   - After you change something, SAVE the file, COMMIT it,
     wait about 30 seconds, then refresh the website.

   👉 Try changing --primary to your favorite color first!
   ============================================================ */

:root {

  /* ---- MAIN COLORS ------------------------------------------ */

  /* The "main" color. It's on buttons, the active sidebar tab,
     and big numbers. Try #ff6b6b (red) or #16a34a (green)! */
  --primary: #6366f1;

  /* The page background. */
  --bg: #f8fafc;

  /* The card background (the little white boxes). */
  --card-bg: #ffffff;

  /* The main text color. */
  --text: #0f172a;

  /* A softer "muted" text color, used for hints. */
  --muted: #64748b;

  /* The "danger" / overdue color (used for delete buttons). */
  --accent: #f43f5e;

  /* A "good news" color (for low priority + GPA stat). */
  --success: #10b981;

  /* A "warning" color (for medium priority + daily goal stat). */
  --warning: #f59e0b;

  /* The sidebar background (the strip on the left). */
  --nav-bg: #1e293b;

  /* Border / line color for cards and inputs. */
  --border: #e2e8f0;


  /* ---- SHAPE & SIZE ----------------------------------------- */

  /* How round the cards are. Try 0 for sharp corners,
     or 40 for super-round bubbles. */
  --radius: 20px;

  /* How wide the sidebar is. */
  --sidebar-width: 250px;


  /* ---- FONT -------------------------------------------------- */

  /* The font for the whole site.
     Try 'Comic Sans MS', or paste a Google Font name.
     Always keep the comma + system-ui at the end as a backup. */
  --font: 'Segoe UI', system-ui, sans-serif;


  /* ---- OVERDUE BANNER (don't usually need to change) -------- */
  --overdue-bg: #fee2e2;
  --overdue-text: #991b1b;

  color-scheme: light;
}


/* ============================================================
   🌙  DARK MODE COLORS
   These take over when the dark-mode toggle is on.
   ============================================================ */

.dark-mode {
  --bg: #0f172a;
  --card-bg: #1e293b;
  --text: #f8fafc;
  --muted: #94a3b8;
  --border: #334155;
  --nav-bg: #020617;
  --overdue-bg: #450a0a;
  --overdue-text: #fecaca;
  color-scheme: dark;
}