/* The site's colours, as named roles rather than raw values, so the light and dark themes are one
   list each. Everything else -- app.css, every .razor.css file, inline styles, chart colours set from
   C# -- uses these var(--lc-...) names and never a colour of its own (ThemeTokenGuardTests checks).

   The light values are the colours the site already used, taken from the live lostcousins.com so it
   stays recognisable. The dark theme redefines the same names under :root[data-theme="dark"], which
   the server renders on the html element (ThemePreference) and the profile menu switches.

   Two rules learnt the hard way on FTAnalyzer.Web: never put a [data-theme] selector in a .razor.css
   file (the scoped-CSS compiler silently outputs nothing for the whole file), and never write the
   comment-closing pair of characters inside a comment (it ends the comment early and the browser
   drops the rest of the block, palette and all). */

/* The light theme. .newsletter-issue and .lc-light-scope re-declare it on themselves, so the newsletter
   "paper" (and anything else marked light-scope) keeps light colours inside a dark page. */
:root,
.newsletter-issue,
.lc-light-scope {
    color-scheme: light;

    /* Page and surfaces */
    --lc-page-bg: #ffffff;
    --lc-surface: #ffffff;             /* cards, panels, menus, inputs */
    --lc-surface-muted: #e7e9eb;       /* grey bands, admin page background, hover */
    --lc-surface-sunken: #f5f5f5;      /* code/pre blocks, envelopes, read-only notes */
    --lc-surface-hover: #f3f5f7;
    --lc-row-alt: #eaeff4;             /* every other row of a long table (My Ancestors) */
    --lc-household-band: #eaeff4;      /* My Ancestors by household: every other household */
    --lc-household-rule: #ccd2d6;      /* My Ancestors by household: the line above a new household */
    --lc-surface-disabled: #f1f2f3;

    /* Lines */
    --lc-border: #dcdfe2;              /* card edges, dividers */
    --lc-border-subtle: #eceef0;       /* rows inside a card */
    --lc-border-strong: #ccd2d6;       /* text boxes and selects */
    --lc-control-edge: #6b7280;        /* the deliberate dark edge on Radzen "Light" buttons */

    /* Text */
    --lc-text: #2c2c2c;
    --lc-text-strong: #222222;
    --lc-text-soft: #3a3f44;           /* secondary body text (admin notes, field labels) */
    --lc-text-muted: #555555;          /* lead paragraphs, hints */
    --lc-text-subtle: #888888;         /* small print, timestamps */
    --lc-text-disabled: #555a5f;
    --lc-heading: #215a7a;

    /* Brand */
    --lc-header-bg: #4782b8;
    --lc-brand-deep: #215a7a;          /* footer, call-to-action bands */
    --lc-brand-label: #4782b8;         /* small brand-blue labels on light surfaces */
    --lc-on-brand: #ffffff;            /* text on the header, footer and red buttons */
    --lc-link: #4283a8;
    --lc-accent: #608eba;              /* focus outlines, accent edges */
    --lc-red-accent: #d1483f;
    --lc-red-accent-hover: #b83a32;
    --lc-focus-ring: #608eba;
    --lc-on-primary: #222222;          /* text on Radzen's orange Primary buttons: white is only 2.8:1 on it */

    /* Status: each family is a tint background, its edge, and readable text on that tint; -strong is
       the saturated colour for icons, edges, progress fills and white-on-colour badges. */
    --lc-info-bg: #dbeafe;
    --lc-info-border: #a9c7f0;
    --lc-info-text: #14325c;
    --lc-info-strong: #3a7bd5;

    --lc-success-bg: #d9f2e3;
    --lc-success-border: #9fd6b6;
    --lc-success-text: #0f4527;
    --lc-success-strong: #16a34a;
    --lc-success-ink: #166534;         /* "done" text on an ordinary surface */

    --lc-warning-bg: #fff8eb;
    --lc-warning-border: #f0c987;
    --lc-warning-text: #78350f;
    --lc-warning-strong: #d97706;
    --lc-warning-ink: #8a5a00;         /* "careful" text on an ordinary surface */

    --lc-caution-bg: #fff3cd;          /* the testing strip and warning banners: yellow, not amber */
    --lc-caution-border: #ecd27a;
    --lc-caution-text: #4d3b00;

    --lc-danger-bg: #fef2f2;
    --lc-danger-border: #fca5a5;
    --lc-danger-text: #7f1d1d;
    --lc-danger-strong: #b91c1c;
    --lc-danger-ink: #b3261e;          /* error text on an ordinary surface */

    --lc-neutral-bg: #eceef0;
    --lc-neutral-text: #4a4f55;

    /* Progress bars */
    --lc-progress-track: #e5e7eb;

    /* Charts and coloured edges: distinct hues that read on both themes' surfaces. */
    --lc-chart-orange: #ff6b3d;
    --lc-chart-amber: #e8a317;
    --lc-chart-red: #e0533d;
    --lc-chart-blue: #3a7bd5;
    --lc-chart-green: #2e9e6b;
    --lc-chart-purple: #7b5ea7;
    --lc-chart-grey: #9ca3af;
    --lc-chart-silver: #b9bec4;
    --lc-chart-sky: #3b82f6;
    --lc-chart-gold: #f0a030;

    /* My Ancestors map: five shades of one blue for how many people a place holds, pale to deep in both themes (darker
       always means more people; checked with the dataviz validator against the empty-land colour), then the sea, empty land, the neighbouring
       countries drawn for context. Each shade has its own edge colour (navy on the pale shades, white on the dark ones), because
       no single line colour shows against every shade. */
    --lc-map-band-1: #6da7ec;
    --lc-map-band-2: #3987e5;
    --lc-map-band-3: #256abf;
    --lc-map-band-4: #184f95;
    --lc-map-band-5: #0d366b;
    --lc-map-sea: #e6f0f9;
    --lc-map-land: #eceef1;
    --lc-map-context: #f7f8f9;
    --lc-map-edge-empty: #a3adb7;
    --lc-map-edge-1: #0d366b;
    --lc-map-edge-2: #0d366b;
    --lc-map-edge-3: #ffffff;
    --lc-map-edge-4: #ffffff;
    --lc-map-edge-5: #ffffff;
    --lc-map-coast: #c3ccd4;
    --lc-map-hover: #d7263d;

    /* The newsletter is a white page in both themes: issues carry their own inline colours (thousands of
       color:black, white table backgrounds, transparent pictures) that can't be recoloured safely. Only
       the "desk" around the page follows the theme. */
    --lc-paper: #ffffff;
    --lc-paper-text: #000000;
    --lc-paper-heading: #28363c;       /* Radzen's own light heading colour, which issues were written against */
    --lc-paper-link: blue;
    --lc-paper-visited: purple;
    --lc-paper-border: #c8d1da;
    --lc-desk: #dde3e9;

    --lc-shadow: rgba(0, 0, 0, 0.08);
    --lc-shadow-strong: rgba(0, 0, 0, 0.2);

    /* Older names, kept so nothing breaks while pages move to the role names above. */
    --lc-blue-header: var(--lc-header-bg);
    --lc-blue-dark: var(--lc-heading);
    --lc-blue-link: var(--lc-link);
    --lc-blue-accent: var(--lc-accent);
    --lc-grey-light: var(--lc-surface-muted);
    /* The site frame (header, member menu, pages, footer) fills the screen, as the admin area does (Alexander,
       17 Oct, on a 4K screen: no wasted space left and right). Prose keeps its own reading column. */
    --lc-max-width: none;
}

/* The dark theme: a deep navy family, so the site still reads as LostCousins blue. Raised things (cards,
   menus) are lighter than the page and recessed things (grey bands, the admin background) darker, the
   same relationship the light theme has. Text/background pairs are at least WCAG AA 4.5:1
   (ThemeContrastTests). Status tints are dark with light text; -strong colours are fills and edges
   (white text on them), -ink colours are text on an ordinary surface. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --lc-page-bg: #141e28;
    --lc-surface: #1c2834;
    --lc-surface-muted: #0f171f;
    --lc-surface-sunken: #16212b;
    --lc-surface-hover: #243342;
    --lc-row-alt: #24323f;
    --lc-household-band: #2b3d4f;
    --lc-household-rule: #6b8196;
    --lc-surface-disabled: #1f2a35;

    --lc-border: #2f4050;
    --lc-border-subtle: #26343f;
    --lc-border-strong: #4a5d6e;
    --lc-control-edge: #7d8fa0;

    --lc-text: #e3e8ed;
    --lc-text-strong: #f2f5f8;
    --lc-text-soft: #cfd7de;
    --lc-text-muted: #aab6c1;
    --lc-text-subtle: #8d9ba8;
    --lc-text-disabled: #8d9ba8;
    --lc-heading: #8fc1e8;

    --lc-header-bg: #1d3a55;
    --lc-brand-deep: #142c42;
    --lc-brand-label: #8fc1e8;
    --lc-on-brand: #ffffff;
    --lc-link: #7db8e3;
    --lc-accent: #6c9fd0;
    --lc-red-accent: #c0392f;
    --lc-red-accent-hover: #a93228;
    --lc-focus-ring: #7db8e3;
    --lc-on-primary: #141e28;

    --lc-info-bg: #15304b;
    --lc-info-border: #2b5a86;
    --lc-info-text: #b9d7f5;
    --lc-info-strong: #5b9be0;

    --lc-success-bg: #123622;
    --lc-success-border: #2a6b46;
    --lc-success-text: #a8e2bf;
    --lc-success-strong: #2fa864;
    --lc-success-ink: #7fd6a0;

    --lc-warning-bg: #3a2a0f;
    --lc-warning-border: #7a5a1e;
    --lc-warning-text: #f3d39a;
    --lc-warning-strong: #e39a2d;
    --lc-warning-ink: #f0b960;

    --lc-caution-bg: #3a3210;
    --lc-caution-border: #7a6a20;
    --lc-caution-text: #f2e1a0;

    --lc-danger-bg: #3d1717;
    --lc-danger-border: #7d2f2f;
    --lc-danger-text: #f5b8b8;
    --lc-danger-strong: #c0392f;
    --lc-danger-ink: #f08a80;

    --lc-neutral-bg: #2a3743;
    --lc-neutral-text: #c3cdd6;

    --lc-progress-track: #2a3743;

    --lc-chart-orange: #ff7f57;
    --lc-chart-amber: #f0b232;
    --lc-chart-red: #ef6a55;
    --lc-chart-blue: #5d9bf0;
    --lc-chart-green: #3fbf86;
    --lc-chart-purple: #a088cc;
    --lc-chart-grey: #8b95a3;
    --lc-chart-silver: #6f7b88;
    --lc-chart-sky: #60a5fa;
    --lc-chart-gold: #f5b04a;

    --lc-map-band-1: #b7d3f6;
    --lc-map-band-2: #86b6ef;
    --lc-map-band-3: #5598e7;
    --lc-map-band-4: #2a78d6;
    --lc-map-band-5: #1c5cab;
    --lc-map-sea: #090d12;
    --lc-map-land: #1f2b37;
    --lc-map-context: #131a21;
    --lc-map-edge-empty: #3e5062;
    --lc-map-edge-1: #0b1218;
    --lc-map-edge-2: #0b1218;
    --lc-map-edge-3: #0b1218;
    --lc-map-edge-4: #cde2fb;
    --lc-map-edge-5: #cde2fb;
    --lc-map-coast: #34444f;
    --lc-map-hover: #ff8a7a;

    --lc-paper-border: #3a4a5a;
    --lc-desk: #0b1218;

    --lc-shadow: rgba(0, 0, 0, 0.4);
    --lc-shadow-strong: rgba(0, 0, 0, 0.6);
}