/* ------------------------------------------------------------------
   Ornitopedie design tokens.

   Everything in app.css reads these semantic tokens and nothing else, so the whole look is swapped by
   changing the brand: <html data-brand="kingfisher"> (default) or data-brand="forest" (the Stromopedie
   look). The brand comes from configuration (Brand:Theme) and BrandTheme.cs carries the same palettes
   for MudBlazor's own controls. See docs/decisions/0005-visual-identity.md.

   Each brand has a light and a dark palette. Dark is declared twice: the media query follows the
   operating system, the data-theme attribute is a theme pinned in the app bar.
   ------------------------------------------------------------------ */

/* --- kingfisher, light (default) -------------------------------------- */
:root {
    --accent: #1b6f7a;
    --accent-deep: #15505a;
    --accent-2: #d9772b;
    --accent-3: #5b8f7b;
    --accent-tint: rgba(27, 111, 122, .11);
    --accent-2-ink: #8f4a12;
    --paper: #f2f6f6;
    --paper-2: #e7eeee;
    --paper-3: #d3dfdf;
    --surface: #ffffff;
    --ink: #1d2a2e;
    --ink-soft: #566468;
    --appbar: #15505a;
    --on-dark: #f2f6f6;
    --bad: #b03a2e;
    --bad-ink: #8f2c22;
    --ok: #3f7d4e;
    --shadow-sm: 0 1px 2px rgba(20, 40, 44, .07), 0 4px 14px rgba(20, 40, 44, .07);
    --shadow-md: 0 6px 24px rgba(20, 40, 44, .14);
    color-scheme: light;
}

/* --- kingfisher, dark: the pond at dusk ------------------------------- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --accent: #6cc4cf;
        --accent-deep: #a6dde3;
        --accent-2: #f0a062;
        --accent-3: #8cc0ab;
        --accent-tint: rgba(108, 196, 207, .14);
        --accent-2-ink: #f3b98a;
        --paper: #0e1517;
        --paper-2: #142022;
        --paper-3: #26363a;
        --surface: #142022;
        --ink: #e6eef0;
        --ink-soft: #9fb0b4;
        --appbar: #0a1113;
        --bad: #e0715f;
        --bad-ink: #f2a597;
        --ok: #8fc79b;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
        --shadow-md: 0 6px 24px rgba(0, 0, 0, .5);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --accent: #6cc4cf;
    --accent-deep: #a6dde3;
    --accent-2: #f0a062;
    --accent-3: #8cc0ab;
    --accent-tint: rgba(108, 196, 207, .14);
    --accent-2-ink: #f3b98a;
    --paper: #0e1517;
    --paper-2: #142022;
    --paper-3: #26363a;
    --surface: #142022;
    --ink: #e6eef0;
    --ink-soft: #9fb0b4;
    --appbar: #0a1113;
    --bad: #e0715f;
    --bad-ink: #f2a597;
    --ok: #8fc79b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 24px rgba(0, 0, 0, .5);
}

/* --- forest, light (the Stromopedie look) ----------------------------- */
:root[data-brand="forest"] {
    --accent: #2f5d3a;
    --accent-deep: #24482d;
    --accent-2: #c98a2b;
    --accent-3: #6b8f4e;
    --accent-tint: rgba(47, 93, 58, .12);
    --accent-2-ink: #8a5c15;
    --paper: #f6f1e7;
    --paper-2: #efe7d6;
    --paper-3: #e3d9c6;
    --surface: #fffdf8;
    --ink: #2a2620;
    --ink-soft: #6b6259;
    --appbar: #24482d;
    --on-dark: #f6f1e7;
    --bad: #a23b2c;
    --bad-ink: #8a2f22;
    --ok: #4d7c56;
    --shadow-sm: 0 1px 2px rgba(42, 38, 32, .06), 0 4px 14px rgba(42, 38, 32, .06);
    --shadow-md: 0 6px 24px rgba(42, 38, 32, .12);
}

/* --- forest, dark: the forest at night -------------------------------- */
@media (prefers-color-scheme: dark) {
    :root[data-brand="forest"]:not([data-theme="light"]) {
        --accent: #8cc59a;
        --accent-deep: #b7dcbf;
        --accent-2: #e0a345;
        --accent-3: #9cc07e;
        --accent-tint: rgba(140, 197, 154, .14);
        --accent-2-ink: #eab865;
        --paper: #111510;
        --paper-2: #182017;
        --paper-3: #2b3529;
        --surface: #172016;
        --ink: #ebe6da;
        --ink-soft: #aaa393;
        --appbar: #0c110b;
        --bad: #e0715f;
        --bad-ink: #f2a597;
        --ok: #8cc59a;
    }
}

:root[data-brand="forest"][data-theme="dark"] {
    --accent: #8cc59a;
    --accent-deep: #b7dcbf;
    --accent-2: #e0a345;
    --accent-3: #9cc07e;
    --accent-tint: rgba(140, 197, 154, .14);
    --accent-2-ink: #eab865;
    --paper: #111510;
    --paper-2: #182017;
    --paper-3: #2b3529;
    --surface: #172016;
    --ink: #ebe6da;
    --ink-soft: #aaa393;
    --appbar: #0c110b;
    --bad: #e0715f;
    --bad-ink: #f2a597;
    --ok: #8cc59a;
}

/* Fixed, brand-independent look. */
:root {
    --serif: "Fraunces", Georgia, serif;
    --sans: "Source Sans 3", "Segoe UI", sans-serif;
    --radius: 14px;
    --max: 1240px;
}