/* General Variables */
:root {
    --font-family-system: -apple-system, BlinkMacSystemFont, "SF Pro Display",
        "SF Pro Text", "Inter", sans-serif;
    --font-family-monospace: "SF Mono", Consolas, "Courier New", monospace;

    --color-background-light: #f5f5f7;
    --color-foreground-light: #f9fafb;
    --color-titletext-light: #111827;
    --color-bodytext-light: #4b5563;

    --color-background-dark: #111827;
    --color-foreground-dark: #1f2937;
    --color-titletext-dark: #f3f4f6;
    --color-bodytext-dark: #d1d5db;

    --color-accent: #487CB4; /* #5e8d83 */
    --color-secondary: #a0a6b2;

    --color-row-secondary: #fafafa;

    --color-highlight-important: #e03535;
}

/* 
Light Mode
@media (prefers-color-scheme: light) {
    :root {
        --color-background-primary: #ffffff;
        --color-background-secondary: #f2f2f7;
        --color-background-tertiary: #f2f2f7;

        --color-text-primary: #000000;
        --color-text-secondary: #3c3c43;
        --color-text-tertiary: #3c3c4399;

        --color-fill-primary: #007aff;
        --color-fill-secondary: #5856d6;
        --color-fill-tertiary: #af52de;

        --color-red: #ff3b30;
        --color-orange: #ff9500;
        --color-yellow: #ffcc00;
        --color-green: #34c759;
        --color-mint: #00c7be;
        --color-teal: #30b0c7;
        --color-cyan: #32d74b;
        --color-blue: #007aff;
        --color-indigo: #5856d6;
        --color-purple: #af52de;
        --color-pink: #ff2d92;
        --color-brown: #a2845e;

        --color-gray: #8e8e93;
        --color-gray-2: #aeaeb2;
        --color-gray-3: #c7c7cc;
        --color-gray-4: #d1d1d6;
        --color-gray-5: #e5e5ea;
        --color-gray-6: #f2f2f7;

        --color-separator: #3c3c4349;
        --color-border: #d1d1d6;
    }
}

Dark Mode
@media (prefers-color-scheme: dark) {
    :root {
        --color-background-primary: #000000;
        --color-background-secondary: #1c1c1e;
        --color-background-tertiary: #2c2c2e;

        --color-text-primary: #ffffff;
        --color-text-secondary: #ebebf599;
        --color-text-tertiary: #ebebf54d;

        --color-fill-primary: #0a84ff;
        --color-fill-secondary: #5e5ce6;
        --color-fill-tertiary: #bf5af2;

        --color-red: #ff453a;
        --color-orange: #ff9f0a;
        --color-yellow: #ffd60a;
        --color-green: #30d158;
        --color-mint: #63e6e2;
        --color-teal: #40c8e0;
        --color-cyan: #64d2ff;
        --color-blue: #0a84ff;
        --color-indigo: #5e5ce6;
        --color-purple: #bf5af2;
        --color-pink: #ff375f;
        --color-brown: #ac8e68;

        --color-gray: #8e8e93;
        --color-gray-2: #636366;
        --color-gray-3: #48484a;
        --color-gray-4: #3a3a3c;
        --color-gray-5: #2c2c2e;
        --color-gray-6: #1c1c1e;

        --color-separator: #54545899;
        --color-border: #38383a;
    }
} 

*/