/* =====================================================================
   Linea theme: design tokens, colour themes and text sizes shared by Linea apps.

   Contract (any HTML page, .NET or not):
     <html data-theme="system|light|dark|parchment|contrast" data-text-size="normal|large|x-large"
           data-vision="none|protanopia|deuteranopia|tritanopia">
   "system" follows the browser's light/dark preference. With no data-theme, light applies. data-vision is optional:
   it adjusts any theme's meaning-carrying colours for that colour vision (see "Colour vision" below).

   Tokens (CSS custom properties) every theme defines:
     --bg --surface --surface-2 --text --text-muted --border
     --accent --accent-soft --accent-contrast --warn --warn-soft --danger --danger-soft
     --focus --shadow, plus color-scheme.
   Shared, theme-independent: --font-body --font-display --radius --radius-sm --container --ease.

   To add a theme: add a [data-theme="name"] block defining every token above, and its key to
   LineaThemes.Keys (src/Linea.Theme/LineaThemes.cs). The tests check both.
   ===================================================================== */

:root {
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --radius: 14px;
    --radius-sm: 8px;
    --container: 76rem;
    --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Light (also the default for "system") ---------- */
:root,
[data-theme="light"],
[data-theme="system"] {
    color-scheme: light;
    --bg: #f7f6f3;
    --surface: #ffffff;
    --surface-2: #efede8;
    --text: #1c1b19;
    --text-muted: #5f5b53;
    --border: #e1ddd4;
    --accent: #3f5bd9;
    --accent-soft: #e6eafc;
    --accent-contrast: #ffffff;
    --warn: #9a5b00;
    --warn-soft: #fbefd9;
    --danger: #b3261e;
    --danger-soft: #fbe3e1;
    --focus: #3f5bd9;
    --shadow: 0 1px 2px rgb(28 27 25 / .06), 0 8px 24px -12px rgb(28 27 25 / .18);
}

/* ---------- Dark ---------- */
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #121316;
    --surface: #1b1d22;
    --surface-2: #252830;
    --text: #ecebe8;
    --text-muted: #a7a49c;
    --border: #2f323b;
    --accent: #8ea2ff;
    --accent-soft: #232a4a;
    --accent-contrast: #0d1024;
    --warn: #f0b760;
    --warn-soft: #3a2c14;
    --danger: #ff8a80;
    --danger-soft: #3d1c1a;
    --focus: #8ea2ff;
    --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -16px rgb(0 0 0 / .7);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        color-scheme: dark;
        --bg: #121316;
        --surface: #1b1d22;
        --surface-2: #252830;
        --text: #ecebe8;
        --text-muted: #a7a49c;
        --border: #2f323b;
        --accent: #8ea2ff;
        --accent-soft: #232a4a;
        --accent-contrast: #0d1024;
        --warn: #f0b760;
        --warn-soft: #3a2c14;
        --danger: #ff8a80;
        --danger-soft: #3d1c1a;
        --focus: #8ea2ff;
        --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 32px -16px rgb(0 0 0 / .7);
    }
}

/* ---------- Parchment (warm, book-like) ---------- */
[data-theme="parchment"] {
    color-scheme: light;
    --bg: #f3ead8;
    --surface: #fbf5e8;
    --surface-2: #eadfc6;
    --text: #2b2118;
    --text-muted: #6b5a47;
    --border: #d9cbad;
    --accent: #8a3b1e;
    --accent-soft: #f1dccb;
    --accent-contrast: #fff8ee;
    --warn: #8a5a00;
    --warn-soft: #f3e2bd;
    --danger: #9b2c1f;
    --danger-soft: #f3d6cf;
    --focus: #8a3b1e;
    --shadow: 0 1px 2px rgb(43 33 24 / .08), 0 10px 26px -14px rgb(43 33 24 / .25);
    --font-body: var(--font-display);
}

/* ---------- High contrast (WCAG AAA-leaning) ---------- */
[data-theme="contrast"] {
    color-scheme: dark;
    --bg: #000000;
    --surface: #000000;
    --surface-2: #1a1a1a;
    --text: #ffffff;
    --text-muted: #e6e6e6;
    --border: #ffffff;
    --accent: #ffe600;
    --accent-soft: #333000;
    --accent-contrast: #000000;
    --warn: #ffb000;
    --warn-soft: #000000;
    --danger: #ff6b6b;
    --danger-soft: #000000;
    --focus: #00e5ff;
    --shadow: none;
}
[data-theme="contrast"] a { text-decoration: underline; }

/* ---------- Colour vision (data-vision) ----------
   Optional, on top of any theme: <html data-vision="none|protanopia|deuteranopia|tritanopia">. Each replaces the colours that
   carry meaning (accent, warn, danger and their soft backgrounds; the focus ring where needed) with ones that stay
   apart for that colour vision, checked with the Machado (2009) simulation: accent, warn, danger and text at least
   30 apart (CIE ΔE), every colour at least 4.5:1 against the page (7:1 in high contrast). Nothing else changes, and
   pictures are never filtered. "none" (or no attribute) leaves the theme as it is. */
html[data-vision="protanopia"]:not([data-theme]),
html[data-vision="protanopia"][data-theme="light"],
html[data-vision="protanopia"][data-theme="system"] {
    --warn: #8a6d00;
    --warn-soft: #efebdb;
    --danger: #c0307e;
    --danger-soft: #f6e2ed;
}
html[data-vision="protanopia"][data-theme="dark"] {
    --warn: #e3d35a;
    --warn-soft: #47452e;
    --danger: #e8606a;
    --danger-soft: #482c32;
}
@media (prefers-color-scheme: dark) {
    html[data-vision="protanopia"][data-theme="system"] {
        --warn: #e3d35a;
        --warn-soft: #47452e;
        --danger: #e8606a;
        --danger-soft: #482c32;
    }
}
html[data-vision="protanopia"][data-theme="parchment"] {
    --accent: #2a4fcc;
    --accent-soft: #dde3f6;
    --warn: #7d6212;
    --warn-soft: #e9e0ca;
    --danger: #ae3289;
    --danger-soft: #f0dadb;
    --focus: #2a4fcc;
}
html[data-vision="protanopia"][data-theme="contrast"] {
    --warn-soft: #000000;
    --warn: #b39ae0;
    --danger-soft: #000000;
    --danger: #ffa060;
}
html[data-vision="deuteranopia"]:not([data-theme]),
html[data-vision="deuteranopia"][data-theme="light"],
html[data-vision="deuteranopia"][data-theme="system"] {
    --warn: #935c10;
    --warn-soft: #f0e8de;
    --danger: #b8407a;
    --danger-soft: #f5e4ec;
}
html[data-vision="deuteranopia"][data-theme="dark"] {
    --warn: #e3d35a;
    --warn-soft: #47452e;
    --danger: #e8606a;
    --danger-soft: #482c32;
}
@media (prefers-color-scheme: dark) {
    html[data-vision="deuteranopia"][data-theme="system"] {
        --warn: #e3d35a;
        --warn-soft: #47452e;
        --danger: #e8606a;
        --danger-soft: #482c32;
    }
}
html[data-vision="deuteranopia"][data-theme="parchment"] {
    --accent: #2b4c8c;
    --accent-soft: #dce3f0;
    --warn: #6f5600;
    --warn-soft: #e7dfc8;
    --danger: #b23f7d;
    --danger-soft: #f1dcd9;
    --focus: #2b4c8c;
}
html[data-vision="deuteranopia"][data-theme="contrast"] {
    --warn-soft: #000000;
    --warn: #b39ae0;
    --danger-soft: #000000;
    --danger: #ef8270;
}
html[data-vision="tritanopia"]:not([data-theme]),
html[data-vision="tritanopia"][data-theme="light"],
html[data-vision="tritanopia"][data-theme="system"] {
    --warn: #8a3ea6;
    --warn-soft: #efe4f3;
    --danger: #c0262d;
    --danger-soft: #f6e1e2;
}
html[data-vision="tritanopia"][data-theme="dark"] {
    --warn: #cf88ee;
    --warn-soft: #43354f;
    --danger: #f0654a;
    --danger-soft: #4a2d2b;
}
@media (prefers-color-scheme: dark) {
    html[data-vision="tritanopia"][data-theme="system"] {
        --warn: #cf88ee;
        --warn-soft: #43354f;
        --danger: #f0654a;
        --danger-soft: #4a2d2b;
    }
}
html[data-vision="tritanopia"][data-theme="parchment"] {
    --warn: #7a3fc0;
    --warn-soft: #e9dce2;
    --danger: #c8161c;
    --danger-soft: #f4d6cb;
}
html[data-vision="tritanopia"][data-theme="contrast"] {
    --accent: #00e5ff;
    --accent-soft: #003a40;
    --warn-soft: #000000;
    --warn: #d07af0;
    --danger-soft: #000000;
    --danger: #ff6e86;
    --focus: #ffe600;
}

/* The Linea mark (Brand/LineaLogo.razor): a 2rem square in the menu bar, inline SVG or a configured image. A site's
   own .brand-mark rules (background, colour) do not apply to the image. */
.brand-mark svg, .brand-mark img { width: 2rem; height: 2rem; display: block; }
.brand-logo { background: none !important; }
.brand-logo img { object-fit: contain; }
.brand-logo .brand-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo picture { display: none; }
html[data-theme="dark"] .brand-logo .brand-logo-dark { display: block; }

/* ---------- Text size ---------- */
html { font-size: 100%; }
html[data-text-size="large"] { font-size: 112.5%; }
html[data-text-size="x-large"] { font-size: 125%; }

/* The cookie manager (Usage/UsageTracking.razor): a <dialog>. Open on arrival it sits at the bottom of the page (not
   modal, the page stays usable); opened again from the Cookies line it is a modal in the middle. */
.linea-cookie-dialog {
  position: fixed; inset: auto 1rem 1rem 1rem; z-index: 1000; width: auto; max-width: 44rem; margin-inline: auto;
  padding: 1rem 1.25rem; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.linea-cookie-dialog:modal { inset: 0; margin: auto; max-height: calc(100vh - 2rem); overflow: auto; }
.linea-cookie-dialog::backdrop { background: rgb(0 0 0 / .4); }
.linea-cookie-dialog .linea-usage-title { margin: 0 0 .35rem; font-size: 1.05rem; }
.linea-cookie-dialog p { margin: 0 0 .75rem; }
.linea-cookie-categories { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.linea-cookie-categories label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.linea-cookie-categories input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--accent, currentColor); }
.linea-cookie-categories p { margin: .15rem 0 0 1.6rem; font-size: .9rem; color: var(--text-muted); }
.linea-usage-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.linea-usage-change { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; align-items: baseline;
  margin: 1.5rem auto 1rem; font-size: .85rem; color: var(--text-muted); }
.linea-usage-change .btn-link { font-size: inherit; }

/* The shared footer (Footer/LineaFooter.razor): the common pages' links above the site's own line. */
.linea-footer .footer-inner { flex-direction: column; align-items: flex-start; gap: .6rem; }
.linea-footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }
.linea-footer-links a { color: var(--text-muted); text-decoration: none; font-size: .92rem; }
.linea-footer-links a:hover, .linea-footer-links a:focus-visible { color: var(--text); text-decoration: underline; }
/* The open-source licenses (Footer/OpenSourceLicenses.razor): a heading per licence, a table grouped by vendor. */
.linea-license-name { margin: 1.25rem 0 .4rem; font-size: 1.05rem; }
.linea-license-table th[scope="rowgroup"] { vertical-align: top; text-align: left; font-weight: 600; white-space: nowrap; }
.linea-license-table tbody tr:has(th[scope="rowgroup"]) > * { border-top: 1px solid var(--border); }
.linea-license-table { width: 100%; table-layout: fixed; }
.linea-license-table th, .linea-license-table td { text-align: left; overflow-wrap: anywhere; }
.linea-license-table th:nth-child(1) { width: 28%; }
.linea-license-table th:nth-child(3) { width: 7rem; }