:root {
      /* Text Colors */
      --color-text: #283B43;           /* Primary text (pure black) */
      --color-text-light: #283B43;     /* Secondary text (dark gray) */
      --color-text-muted: #283B43;     /* Muted text (medium gray) */

      /* Background Colors */
      --color-background: #FFFCF5;      /* Main background (white) */
      --color-background-alt: #FFFCF5;  /* Alternate background (light gray) */

      /* Border Colors */
      --color-border: rgba(40, 59, 67, 0.2);         /* Standard borders */
      --color-border-light: rgba(40, 59, 67, 0.2);   /* Light borders */

      /* Link Colors */
      --color-link: #0486A2;           /* Link color */
      --color-link-hover: #0486A2;     /* Link hover color */

      /* Accent Color */
      --color-accent: #0486A2;         /* Focus outlines, highlights */
}
@media (prefers-color-scheme: dark) {
    :root {
        /* Text Colors */
        --color-text: #FFFAF0;           /* Primary text (light gray) */
        --color-text-light: #FFFAF0;     /* Secondary text */
        --color-text-muted: #FFFAF0;     /* Muted text */

        /* Background Colors */
        --color-background: #283B43;     /* Main background (dark) */
        --color-background-alt: #283B43; /* Alternate background */

        /* Border Colors */
       --color-border: rgba(255,250,240,0.2);         /* Standard borders */
       --color-border-light: rgba(255,250,240,0.2);   /* Light borders */

        /* Link Colors */
        --color-link: #4FC9E4;           /* Link color */
        --color-link-hover: #4FC9E4;     /* Link hover color */

        /* Accent Color */
        --color-accent: #4FC9E4;         /* Focus outlines, highlights */
    }
}