/* Adapted from the supplied Flokktid design. Keep palette values in this file.
   Control borders and text pairs are intentionally stronger than decorative dividers. */
@layer base {
    :root {
        color-scheme: light;
        --logo-background: #FFFFFF;
        --shadow: rgb(0 0 0 / 0.1);
        --shadow-strong: rgb(0 0 0 / 0.25);
        --backdrop: rgb(0 0 0 / 0.5);
        --bg: #F7F8F5;
        --surface: #FFFFFF;
        --text: #203536;
        --muted: #546769;
        --primary: #00666B;
        --primary-hover: #005257;
        --on-primary: #FFFFFF;
        --primary-soft: #E3F2F0;
        --accent: #FF785B;
        --on-accent: #263536;
        --accent-soft: #FFF0E8;
        --accent-text: #9C3F24;
        --border: #D9E3E0;
        --control-border: #778C88;
        --focus: #00666B;
        --success-bg: #E8F4EA;
        --success-text: #24613F;
        --warning-bg: #FFF3D6;
        --warning-text: #765009;
        --danger-bg: #FCEBEA;
        --danger-text: #A52E2E;

        /* One hue colors the whole silhouette; dark mode uses lighter shades. */
        --avatar-teal: #317E78;
        --avatar-coral: #B95538;
        --avatar-gold: #946B1D;
        --avatar-blue: #487CAB;
        --avatar-violet: #8864AC;
        --avatar-rose: #B34F73;
        --avatar-color: var(--avatar-teal);
    }

    /* Explicit dark preferences and the device preference share the same palette. */
    :root[data-theme=dark] {
        color-scheme: dark;
        --bg: #111C20;
        --surface: #1B2B30;
        --text: #EFF7F6;
        --muted: #B2C5C3;
        --primary: #7CD5CC;
        --primary-hover: #A0E5DE;
        --on-primary: #102B2C;
        --primary-soft: #213E42;
        --accent: #FF9D81;
        --on-accent: #263536;
        --accent-soft: #3C2925;
        --accent-text: #FFB498;
        --border: #344A4F;
        --control-border: #6F8A8F;
        --focus: #7CD5CC;
        --success-bg: #193B2D;
        --success-text: #98DFAD;
        --warning-bg: #3D321C;
        --warning-text: #F5D285;
        --danger-bg: #44282A;
        --danger-text: #FFB2AF;
        --avatar-teal: #7CD5CC;
        --avatar-coral: #FF9D81;
        --avatar-gold: #E8C56D;
        --avatar-blue: #90BDEC;
        --avatar-violet: #C4A5E9;
        --avatar-rose: #EBA1BB;
    }

    @media (prefers-color-scheme: dark) {
        :root[data-theme=system] {
            color-scheme: dark;
            --bg: #111C20;
            --surface: #1B2B30;
            --text: #EFF7F6;
            --muted: #B2C5C3;
            --primary: #7CD5CC;
            --primary-hover: #A0E5DE;
            --on-primary: #102B2C;
            --primary-soft: #213E42;
            --accent: #FF9D81;
            --on-accent: #263536;
            --accent-soft: #3C2925;
            --accent-text: #FFB498;
            --border: #344A4F;
            --control-border: #6F8A8F;
            --focus: #7CD5CC;
            --success-bg: #193B2D;
            --success-text: #98DFAD;
            --warning-bg: #3D321C;
            --warning-text: #F5D285;
            --danger-bg: #44282A;
            --danger-text: #FFB2AF;
            --avatar-teal: #7CD5CC;
            --avatar-coral: #FF9D81;
            --avatar-gold: #E8C56D;
            --avatar-blue: #90BDEC;
            --avatar-violet: #C4A5E9;
            --avatar-rose: #EBA1BB;
        }
    }

    :root[data-theme=contrast] {
        color-scheme: light;
        --bg: #FFFFFF;
        --surface: #FFFFFF;
        --text: #111F22;
        --muted: #37474A;
        --primary: #004D53;
        --primary-hover: #003A40;
        --on-primary: #FFFFFF;
        --primary-soft: #E3F2F0;
        --accent: #FF785B;
        --on-accent: #111F22;
        --accent-soft: #FFF0E8;
        --accent-text: #853318;
        --border: #52686B;
        --control-border: #52686B;
        --focus: #004D53;
        --success-bg: #E8F4EA;
        --success-text: #19482E;
        --warning-bg: #FFF3D6;
        --warning-text: #654107;
        --danger-bg: #FCEBEA;
        --danger-text: #872525;
    }
}