/* Liveswim Theme Variables - Light and Dark Mode */

/* Light Mode (Default) */
:root {
    /* Primary colors */
    --color-primary: #00478d;
    --color-primary-container: #005eb8;
    --color-primary-fixed: #d6e3ff;
    --color-primary-fixed-dim: #a9c7ff;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #c8daff;
    --color-on-primary-fixed: #001b3d;
    --color-on-primary-fixed-variant: #00468c;
    --color-inverse-primary: #a9c7ff;

    /* Secondary colors */
    --color-secondary: #00677e;
    --color-secondary-container: #00d2fd;
    --color-secondary-fixed: #b4ebff;
    --color-secondary-fixed-dim: #3cd7ff;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #005669;
    --color-on-secondary-fixed: #001f27;
    --color-on-secondary-fixed-variant: #004e5f;

    /* Tertiary colors */
    --color-tertiary: #5f4300;
    --color-tertiary-container: #7d5900;
    --color-tertiary-fixed: #ffdea8;
    --color-tertiary-fixed-dim: #ffba20;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #ffd489;
    --color-on-tertiary-fixed: #271900;
    --color-on-tertiary-fixed-variant: #5e4200;

    /* Error colors */
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #93000a;

    /* Surface colors */
    --color-surface: #f9f9fc;
    --color-surface-dim: #dadadc;
    --color-surface-bright: #f9f9fc;
    --color-surface-container-lowest: #ffffff;
    --color-surface-container-low: #f3f3f6;
    --color-surface-container: #eeeef0;
    --color-surface-container-high: #e8e8ea;
    --color-surface-container-highest: #e2e2e5;
    --color-surface-variant: #e2e2e5;
    --color-surface-tint: #005db6;

    /* On surface colors */
    --color-on-surface: #1a1c1e;
    --color-on-surface-variant: #424752;
    --color-inverse-surface: #2f3133;
    --color-inverse-on-surface: #f0f0f3;

    /* Background */
    --color-background: #f9f9fc;
    --color-on-background: #1a1c1e;

    /* Outline */
    --color-outline: #727783;
    --color-outline-variant: #c2c6d4;
}

/* Dark Mode */
html.dark {
    /* Primary colors */
    --color-primary: #00478d;
    --color-primary-container: #005eb8;
    --color-primary-fixed: #d6e3ff;
    --color-primary-fixed-dim: #a9c7ff;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #c8daff;
    --color-on-primary-fixed: #001b3d;
    --color-on-primary-fixed-variant: #00468c;
    --color-inverse-primary: #a9c7ff;

    /* Secondary colors */
    --color-secondary: #00677e;
    --color-secondary-container: #00d2fd;
    --color-secondary-fixed: #b4ebff;
    --color-secondary-fixed-dim: #3cd7ff;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #005669;
    --color-on-secondary-fixed: #001f27;
    --color-on-secondary-fixed-variant: #004e5f;

    /* Tertiary colors */
    --color-tertiary: #5f4300;
    --color-tertiary-container: #7d5900;
    --color-tertiary-fixed: #ffdea8;
    --color-tertiary-fixed-dim: #ffba20;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #ffd489;
    --color-on-tertiary-fixed: #271900;
    --color-on-tertiary-fixed-variant: #5e4200;

    /* Error colors */
    --color-error: #ba1a1a;
    --color-error-container: #ffdad6;
    --color-on-error: #ffffff;
    --color-on-error-container: #93000a;

    /* Surface colors - DARK MODE CHANGES */
    --color-surface: #0b0e11;
    --color-surface-dim: #1a1c1e;
    --color-surface-bright: #1a1c1e;
    --color-surface-container-lowest: #0b0e11;
    --color-surface-container-low: #1a1c1e;
    --color-surface-container: #1d2024;
    --color-surface-container-high: #282a2f;
    --color-surface-container-highest: #2f3133;
    --color-surface-variant: #424752;
    --color-surface-tint: #005db6;

    /* On surface colors - DARK MODE CHANGES */
    --color-on-surface: #f0f0f3;
    --color-on-surface-variant: #c2c6d4;
    --color-inverse-surface: #f0f0f3;
    --color-inverse-on-surface: #f0f0f3;

    /* Background - DARK MODE CHANGES */
    --color-background: #0b0e11;
    --color-on-background: #f0f0f3;

    /* Outline */
    --color-outline: #727783;
    --color-outline-variant: #424752;
}

/* Utility classes for using CSS variables */
.bg-surface { background-color: var(--color-surface); }
.bg-surface-container { background-color: var(--color-surface-container); }
.bg-surface-container-low { background-color: var(--color-surface-container-low); }
.bg-surface-container-high { background-color: var(--color-surface-container-high); }
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }

.text-on-surface { color: var(--color-on-surface); }
.text-on-background { color: var(--color-on-background); }
.text-primary { color: var(--color-primary); }
.text-on-primary { color: var(--color-on-primary); }

.border-outline { border-color: var(--color-outline); }
.border-outline-variant { border-color: var(--color-outline-variant); }