/* brand colors */
:root {
    --color-alpine-green: oklch(44% 0.08428 141.643 / 1.0);
    --color-alpine-green-dark: oklch(33% 0.08428 141.643 / 1.0);
    --color-alpine-sand: oklab(85.91% 0.00154 0.02163);
    --color-alpine-sand-dark: oklch(49% 0.02121 83.019 / 1.0);
    --color-alpine-cream: oklch(91.042% 0.01971 49.946 / 1.0);
    --color-alpine-cream-dark: oklch(49% 0.01971 49.946 / 1.0);
    --color-alpine-sky: oklch(89.772% 0.01572 269.986 / 1.0);
    --color-alpine-sky-dark: oklch(49% 0.01572 269.986 / 1.0);
    --color-alpine-red: #a32600;
    --color-alpine-black: oklch(0% 0 0);

    --color-alpine-snow: oklch(1 0 0 / 1.0); /* white */
    --color-alpine-smoke: oklch(23.503% 0.00003 271.152 / 1.0); /* charcoal */

    --color-transition: 0.3s ease-in-out;
}
:root { 
    background-color: light-dark(white, black);
}

/* light color scheme (default) */
[data-color-scheme="default"],
[data-color-scheme="sand"],
section:not([data-color-scheme]) {
    --bg-color: light-dark(var(--color-alpine-sand), var(--color-alpine-sand-dark));
    --fg-color: light-dark(rgba(0,0,0,0.75), rgba(255,255,255,0.8));
    --accent-color: light-dark(var(--color-3), var(--color-3-dark));
    --tint-color: rgba(255,255,255,0.75);
    --shade-color: rgba(0,0,0,0.75);
    --outline-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));

    /* text colors */
    --text-color: var(--fg-color);
    --link-color: var(--fg-color);
    --link-decoration-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    --heading-color: light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9));
    --subheading-color: light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6));
    --highlight-color: color-mix(in srgb, var(--accent-color) 40%, transparent);

    /* component colors */
    --form-input-bg-color: rgba(255, 255, 255, 1.0);
    --form-input-fg-color: rgba(0,0,0,0.9);
    --form-input-outline-color: rgba(0,0,0,0.7);
    --form-input-placeholder-color: rgba(0,0,0,0.5);
    --button-bg-color: var(--color-alpine-green);
    --button-bg-color-hover: var(--color-alpine-green);
    --button-fg-color: rgba(255,255,255,0.9);
    --button-fg-color-hover: rgba(0,0,0,0.9);
    --img-bg-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.10)); /* for letterboxed/pillarboxed images */
}

/* primary color scheme */
[data-color-scheme="primary"],
[data-color-scheme="green"] {
    --bg-color: light-dark(var(--color-alpine-green), var(--color-alpine-green-dark));
    --fg-color: light-dark(rgba(255,255,255,0.7), rgba(255,255,255,0.6));
    --accent-color: light-dark(var(--color-3), var(--color-3-dark));
    --tint-color: rgba(255,255,255,0.75);
    --shade-color: rgba(0,0,0,0.75);
    --outline-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));

    /* text colors */
    --text-color: var(--fg-color);
    --link-color: var(--fg-color);
    --link-decoration-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    --heading-color: light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9));
    --subheading-color: light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6));
    --highlight-color: color-mix(in srgb, var(--accent-color) 40%, transparent);

    /* component colors */
    --form-input-bg-color: light-dark(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.10));
    --form-input-fg-color: light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9));
    --form-input-outline-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));
    --form-input-placeholder-color: light-dark(rgba(0,0,0,0.7), rgba(255,255,255,0.7));
    --button-bg-color: light-dark(rgba(255,255,255,0.75), var(--color-alpine-sand-dark));
    --button-fg-color: light-dark(var(--color-alpine-green-dark), rgba(255,255,255,0.6));
    --button-bg-color-hover: light-dark(var(--color-alpine-green-dark), var(--color-alpine-sand-dark));
    --button-fg-color-hover: light-dark(rgba(255,255,255,0.80), rgba(0,0,0,0.75));
    --img-bg-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.10)); /* for letterboxed/pillarboxed images */
}

/* white color scheme */
[data-color-scheme="light"],
[data-color-scheme="white"] {
    --bg-color: light-dark(var(--color-alpine-snow), var(--color-alpine-smoke));
    --fg-color: light-dark(rgba(0,0,0,0.7), rgba(255,255,255,0.65));
    --accent-color: light-dark(var(--color-alpine-sand), var(--color-alpine-sand-dark));
    --tint-color: rgba(255,255,255,0.75);
    --shade-color: light-dark(rgba(0,0,0,0.50), rgba(255,255,255,0.50));
    --outline-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));

    /* text colors */
    --text-color: var(--fg-color);
    --link-color: var(--fg-color);
    --link-decoration-color: color-mix(in srgb, var(--accent-color) 40%, transparent);
    --heading-color: light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9));
    --subheading-color: light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6));
    --highlight-color: color-mix(in srgb, var(--accent-color) 40%, transparent);

    /* component colors */
    --form-input-bg-color: light-dark(rgba(255, 255, 255, 1.0), rgba(0, 0, 0, 0.10));
    --form-input-fg-color: light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9));
    --form-input-outline-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.25));
    --form-input-placeholder-color: light-dark(rgba(0,0,0,0.7), rgba(255,255,255,0.7));
    --button-bg-color: light-dark(var(--color-alpine-sand), var(--color-alpine-sand-dark));
    --button-fg-color: light-dark(rgba(0,0,0,0.80), rgba(255,255,255,0.80));
    --button-bg-color-hover: light-dark(rgba(255,255,255,1.0), rgba(0,0,0,0.80));
    --button-fg-color-hover: light-dark(var(--color-alpine-sand-dark), var(--color-alpine-sand-dark));
    --img-bg-color: light-dark(rgba(0,0,0,0.25), rgba(255,255,255,0.10)); /* for letterboxed/pillarboxed images */
}

/* applied color schemes */
[data-color-scheme],
section:not([data-color-scheme]) {
    background-color: var(--bg-color);
    color: var(--text-color);
}

[data-color-scheme] :where(button, link-button>a, link-button>a:visited) {
    background-color: var(--button-bg-color);
    color: var(--button-fg-color);
    border: 3px solid var(--outline-color);
    transition:
        color var(--color-transition),
        background-color var(--color-transition);
}
[data-color-scheme] :where(button:hover, button:focus, link-button>a:hover, link-button>a:focus) {
    background-color: var(--button-bg-color-hover);
    color: var(--button-fg-color-hover);
    border: 3px solid var(--outline-color);
    transition: 
        color var(--color-transition),
        background-color var(--color-transition);
}
[data-color-scheme] form form-group :where(input, textarea, select) {
    border-color: var(--form-input-outline-color);
    color: var(--form-input-fg-color);
    background-color: var(--form-input-bg-color);
}
[data-color-scheme] form form-group :where(input::placeholder, textarea::placeholder, select::placeholder) {
    color: var(--form-input-placeholder-color) !important;
}
[data-color-scheme] img {
    background-color: var(--img-bg-color);
}