/*
 * Mountain Diary — the design tokens of design D "Denik" (Site\Frame\SiteStyles): the colours,
 * type families and corner radius of the public site, and the bridge that hands them to the
 * theme. No other style sheet writes colour values: they use the names below, so one change here
 * reaches every page in both modes — in section 1 for light mode, in section 2 for dark mode.
 * Scripts read some values as written (the map colours), so a value keeps its spelling.
 *
 * 1. Base palette, light mode - the only values written by hand
 * 2. Base palette, dark mode ("hut at night") - the same names, dark values
 * 3. Derived roles - mixed from the base palette, never edited by hand
 * 4. Theme bridge - the theme's own variables point at ours
 *
 * Why html:root: BuddyX writes its palette on :root and its dark palette on
 * :root[data-bx-mode="dark"]. html:root is one step more specific than either, so these values
 * win whatever order the style sheets load in, without !important. BuddyX's colour mode toggle
 * sets data-bx-mode on the html element before the page is painted; light is the site default.
 */
/* stylelint-disable color-hex-length -- the values as scripts read them (getPropertyValue) */

/* 1. Base palette, light mode */

html:root {
    /* Paper, as on the Financial Times. The page and everything that frames
       the content - header, filters, forms - is paper; the content itself -
       the cards of adventures, questions, notes - takes the richer tint FT
       gives its featured stories; fields and drop-down lists take the lighter
       tone of its story groups. Nothing is white. */
    --md-bg: #FFF1E5;
    --md-surface: #F2DFCE;
    --md-field: #FFF7EF;

    /* Ink */
    --md-text: #211E19;
    --md-text-muted: #5B5448;

    /* Brand: primary for the main actions, accent for highlights;
       accent-text is the accent dark enough for small text on paper */
    --md-primary: #2F4B3C;
    --md-accent: #B94E33;
    --md-accent-text: #9E4129;

    /* States */
    --md-ok: #32663F;
    --md-warn: #7A5300;
    --md-err: #A3261B;
    --md-info: #2D5C8A;

    /* The dark band (mobile menu heading, tooltips) - dark in both modes */
    --md-band: #211E19;
    --md-on-band: #F3EDE1;
    --md-on-band-muted: #C9BFAE;

    /* Physical colours: trail signpost yellow, and the difficulty badges that
       sit on adventure photos, with their lettering - white on the two dark
       levels, dark ink on the two bright ones. The same in both modes, except
       extreme, which dark mode lightens (section 2). */
    --md-sign: #F4B400;
    --md-diff-easy: #7CB518;
    --md-diff-moderate: #F0A500;
    --md-diff-hard: #DC3545;
    --md-diff-extreme: #333333;
    --md-on-diff: #FFFFFF;
    --md-on-diff-bright: #211E19;

    /* Physical colours of the maps, the same in both modes: the track of an
       adventure, its start and end markers, and the white ring around them.
       Leaflet draws with plain values, so the map scripts read these names. */
    --md-track: #DD9440;
    --md-track-start: #2E7D32;
    --md-track-end: #C62828;
    --md-marker-ring: #FFFFFF;

    /* The filter laid over the map tiles: none in light mode, the tiles shown
       as Mapy.com draws them; dimmed in dark mode (section 2). */
    --md-map-filter: none;

    /* Physical colours of the avalanche danger scale, EAWS levels 1 to 5, the
       same in both modes, with their lettering - dark ink on levels 1 to 4,
       white on the deep red of level 5. The ink is darker than the text ink,
       which does not reach 4.5:1 on the red of level 4. */
    --md-eaws-1: #CCFF66;
    --md-eaws-2: #FFFF00;
    --md-eaws-3: #FF9900;
    --md-eaws-4: #FF0000;
    --md-eaws-5: #800000;
    --md-on-eaws: #FFFFFF;
    --md-on-eaws-bright: #0E0C09;

    /* Initials avatars of members without a photo (partner cards): one of six
       tones, picked by the first letter of the name; the same in both modes,
       deep enough for the band lettering of the initials to read on each. */
    --md-avatar-1: #845D02;
    --md-avatar-2: #3B6F4D;
    --md-avatar-3: #A44A27;
    --md-avatar-4: #33679C;
    --md-avatar-5: #805390;
    --md-avatar-6: #A94055;

    /* Type families - the files come from the module fonts. Brand is the family
       of the site name in the header: the serif. */
    /* stylelint-disable-next-line value-keyword-case -- family names as the fonts are named */
    --md-font-serif: 'Brygada 1918', Georgia, 'Times New Roman', serif;
    --md-font-ui: 'Barlow Semi Condensed', 'Arial Narrow', system-ui, sans-serif;
    /* stylelint-disable-next-line value-keyword-case -- family names as the fonts are named */
    --md-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --md-font-brand: var(--md-font-serif);

    /* Shape */
    --md-radius: 6px;
    --md-radius-sm: 4px;

    color-scheme: light;
}

/* 2. Base palette, dark mode */

html:root[data-bx-mode="dark"] {
    --md-bg: #16130F;
    --md-surface: #221E18;

    /* Fields sit inset in a box, in the colour of the page */
    --md-field: var(--md-bg);
    --md-text: #EFE8DA;
    --md-text-muted: #B9AF9C;
    --md-primary: #9CC5A6;
    --md-accent: #EE8A67;
    --md-accent-text: #F19A79;
    --md-ok: #8CC49A;
    --md-warn: #F4C44E;
    --md-err: #F28B7D;
    --md-info: #86ADD9;
    --md-band: #0E0C09;
    --md-on-band: #EFE8DA;
    --md-on-band-muted: #B9AF9C;

    /* The extreme badge, a warm grey instead of near black, so it stands out
       from the boxes of the night page; its lettering stays white */
    --md-diff-extreme: #6B645A;

    /* Map tiles dimmed and desaturated, so a map does not glare out of the
       night page ("hut at night") */
    --md-map-filter: saturate(.62) brightness(.74) contrast(1.05);

    color-scheme: dark;
}

/* 3. Derived roles */

/* Each role is a mix of base values, worked out on the html element with
   whichever palette is active - so it follows the mode by itself. */
/* stylelint-disable-next-line no-duplicate-selectors -- a section of its own, after the one above it */
html:root {
    /* Lines */
    --md-border: color-mix(in oklab, var(--md-text) 15%, var(--md-bg));
    --md-border-strong: color-mix(in oklab, var(--md-text) 55%, var(--md-surface));
    --md-rule: var(--md-text);
    --md-hairline: color-mix(in oklab, var(--md-text) 20%, transparent);

    /* Drop-down menus and lists float above the page: in light mode in the
       tone of the fields they open from, in dark mode raised like the boxes */
    --md-dropdown: var(--md-field);

    /* Tints: inside a box (tags, an image still loading), on hover, soft states */
    --md-surface-2: color-mix(in oklab, var(--md-text) 7%, var(--md-surface));
    --md-hover-tint: color-mix(in oklab, var(--md-text) 6%, transparent);
    --md-accent-soft: color-mix(in oklab, var(--md-accent) 16%, var(--md-bg));
    --md-ok-soft: color-mix(in oklab, var(--md-ok) 16%, var(--md-bg));
    --md-warn-soft: color-mix(in oklab, var(--md-warn) 16%, var(--md-bg));
    --md-err-soft: color-mix(in oklab, var(--md-err) 16%, var(--md-bg));
    --md-info-soft: color-mix(in oklab, var(--md-info) 16%, var(--md-bg));

    /* Focus: the keyboard focus ring, and the ring around a field being typed in */
    --md-focus: var(--md-accent);
    --md-field-ring: color-mix(in oklab, var(--md-primary) 35%, transparent);

    /* Text on the filled colours, hover of the filled buttons (the main action
       and a destructive one), shadows (light mode) */
    --md-on-primary: var(--md-field);
    --md-on-accent: var(--md-field);
    --md-on-err: var(--md-field);
    --md-primary-hover: color-mix(in oklab, var(--md-primary) 82%, black);
    --md-err-hover: color-mix(in oklab, var(--md-err) 82%, black);
    --md-shadow-tint: color-mix(in oklab, var(--md-text) 10%, transparent);
    --md-shadow-tint-strong: color-mix(in oklab, var(--md-text) 20%, transparent);
    --md-shadow: 0 18px 40px -24px color-mix(in oklab, var(--md-text) 40%, transparent);
    --md-overlay: color-mix(in oklab, var(--md-text) 55%, transparent);

    /* Lettering of each difficulty level - the badges use these names, so a
       level's ink can change here alone */
    --md-on-diff-easy: var(--md-on-diff-bright);
    --md-on-diff-moderate: var(--md-on-diff-bright);
    --md-on-diff-hard: var(--md-on-diff);
    --md-on-diff-extreme: var(--md-on-diff);

    /* Lettering of each avalanche danger level - the badge uses these names */
    --md-on-eaws-1: var(--md-on-eaws-bright);
    --md-on-eaws-2: var(--md-on-eaws-bright);
    --md-on-eaws-3: var(--md-on-eaws-bright);
    --md-on-eaws-4: var(--md-on-eaws-bright);
    --md-on-eaws-5: var(--md-on-eaws);
}

/* In dark mode drop-downs are raised like the boxes, the filled colours are
   light, so dark ink sits on them, hover lightens instead of darkening, and
   shadows are black rather than ink. */
/* stylelint-disable-next-line no-duplicate-selectors -- a section of its own, after the one above it */
html:root[data-bx-mode="dark"] {
    --md-dropdown: var(--md-surface);
    --md-on-primary: var(--md-bg);
    --md-on-accent: var(--md-bg);
    --md-on-err: var(--md-bg);
    --md-primary-hover: color-mix(in oklab, var(--md-primary) 80%, white);
    --md-err-hover: color-mix(in oklab, var(--md-err) 80%, white);
    --md-shadow-tint: color-mix(in oklab, black 45%, transparent);
    --md-shadow-tint-strong: color-mix(in oklab, black 60%, transparent);
    --md-shadow: 0 18px 40px -24px color-mix(in oklab, black 80%, transparent);
    --md-overlay: color-mix(in oklab, black 65%, transparent);
}

/* 4. Theme bridge */

/* BuddyX paints the page, header, menu, headings, links, buttons, footer and
   BuddyPress from its own variables. Pointing them at ours makes the theme
   follow this palette in both modes with no rule of its own overridden.
   html:root[data-bx-mode] outranks BuddyX's dark palette; html:root covers a
   page where the toggle has not set the attribute.
   Left out on purpose: the variants BuddyX works out from its own colours
   (-rgb, -hover, -active, -bg ... of accent, button, link and header) -
   no stylesheet of the theme reads them - and the WordPress colour presets,
   which only blocks given an explicit colour class would use. */
html:root,
html:root[data-bx-mode] {
    /* BuddyX tokens (inc/Tokens, bx-tokens-applied.css) */
    --bx-color-fg: var(--md-text);
    --bx-color-fg-muted: var(--md-text-muted);
    --bx-color-fg-subtle: var(--md-text-muted);
    --bx-color-fg-inverse: var(--md-bg);
    --bx-color-bg: var(--md-bg);
    --bx-color-bg-page: var(--md-bg);
    --bx-color-bg-subtle: var(--md-bg);

    /* "Elevated" is what the theme paints its fields and small controls with */
    --bx-color-bg-elevated: var(--md-field);
    --bx-color-bg-muted: var(--md-surface-2);
    --bx-color-bg-overlay: var(--md-overlay);
    --bx-color-accent: var(--md-accent);
    --bx-color-accent-secondary: var(--md-primary);
    --bx-color-accent-tertiary: var(--md-sign);
    --bx-color-link: var(--md-text);
    --bx-color-link-hover: var(--md-accent-text);
    --bx-color-button-bg: var(--md-primary);
    --bx-color-button-bg-hover: var(--md-primary-hover);
    --bx-color-button-fg: var(--md-on-primary);
    --bx-color-button-fg-hover: var(--md-on-primary);
    --bx-color-button-border: var(--md-primary);
    --bx-color-button-border-hover: var(--md-primary-hover);
    --bx-color-header-bg: var(--md-bg);
    --bx-color-site-title: var(--md-text);
    --bx-color-site-title-hover: var(--md-accent-text);
    --bx-color-site-tagline: var(--md-text-muted);
    --bx-color-menu-bg: transparent;
    --bx-color-menu-fg: var(--md-text);
    --bx-color-menu-hover: var(--md-accent-text);
    --bx-color-menu-active: var(--md-accent);
    --bx-color-subheader-bg: var(--md-bg);
    --bx-color-subheader-fg: var(--md-text);
    --bx-color-h1: var(--md-text);
    --bx-color-h2: var(--md-text);
    --bx-color-h3: var(--md-text);
    --bx-color-h4: var(--md-text);
    --bx-color-h5: var(--md-text);
    --bx-color-h6: var(--md-text);

    /* The footer wears the header's colours */
    --bx-color-footer-bg: var(--md-bg);
    --bx-color-footer-title: var(--md-text);
    --bx-color-footer-fg: var(--md-text-muted);
    --bx-color-footer-link: var(--md-text);
    --bx-color-footer-link-hover: var(--md-accent-text);
    --bx-color-copyright-bg: var(--md-bg);
    --bx-color-copyright-border: var(--md-border);
    --bx-color-copyright-fg: var(--md-text-muted);
    --bx-color-copyright-link: var(--md-text);
    --bx-color-copyright-link-hover: var(--md-accent-text);
    --bx-color-loader-bg: var(--md-bg);
    --bx-color-border: var(--md-border);
    --bx-color-border-strong: var(--md-border-strong);
    --bx-color-divider: var(--md-border);
    --bx-color-shadow: var(--md-shadow-tint);
    --bx-color-shadow-strong: var(--md-shadow-tint-strong);
    --bx-color-success: var(--md-ok);
    --bx-color-success-bg: var(--md-ok-soft);
    --bx-color-warning: var(--md-warn);
    --bx-color-warning-bg: var(--md-warn-soft);
    --bx-color-error: var(--md-err);
    --bx-color-error-bg: var(--md-err-soft);
    --bx-color-info: var(--md-info);
    --bx-color-info-bg: var(--md-info-soft);
    --bx-color-presence-online: var(--md-ok);
    --bx-color-presence-away: var(--md-warn);
    --bx-color-presence-busy: var(--md-err);
    --bx-color-presence-offline: var(--md-text-muted);
    --bx-color-bp-friend: var(--md-info);
    --bx-color-bp-favorite: var(--md-err);
    --bx-color-input-bg: var(--md-field);
    --bx-color-input-border: var(--md-border-strong);
    --bx-color-input-focus-border: var(--md-primary);
    --bx-color-input-fg: var(--md-text);
    --bx-color-input-placeholder: var(--md-text-muted);
    --bx-radius-global: var(--md-radius);
    --bx-radius-button: var(--md-radius);
    --bx-radius-form: var(--md-radius);
    --bx-radius-card: var(--md-radius);

    /* The theme's older variable names, still read by global.css and
       buddypress.css. In dark mode BuddyX writes most of them as fixed values,
       so they need pointing at ours just like the tokens above. */
    --global-font-family: var(--md-font-ui);
    --highlight-font-family: var(--md-font-ui);
    --global-font-color: var(--md-text);
    --global-title-color: var(--md-text);
    --global-border-color: var(--md-border);
    --global-body-lightcolor: var(--md-surface-2);
    --global-border-radius: var(--md-radius);
    --global-border-radius-inner: var(--md-radius);
    --button-border-radius: var(--md-radius);
    --form-border-radius: var(--md-radius);
    --textarea-border-radius: var(--md-radius);
    --color-theme-primary: var(--md-accent);
    --color-theme-body: var(--md-bg);

    /* The "white box" of the theme is its fields again; the subtle block
       tint shades tables, code and quotes inside an article */
    --color-theme-white-box: var(--md-field);
    --color-block-bg-subtle: var(--md-surface);
    --color-header-bg: var(--md-bg);
    --color-site-title: var(--md-text);
    --color-site-title-hover: var(--md-accent-text);
    --color-site-tagline: var(--md-text-muted);
    --color-menu: var(--md-text);
    --color-menu-hover: var(--md-accent-text);
    --color-menu-active: var(--md-accent);
    --color-subheader-title: var(--md-text);
    --color-link: var(--md-text);
    --color-link-hover: var(--md-accent-text);
    --color-link-active: var(--md-accent-text);
    --color-h1: var(--md-text);
    --color-h2: var(--md-text);
    --color-h3: var(--md-text);
    --color-h4: var(--md-text);
    --color-h5: var(--md-text);
    --color-h6: var(--md-text);
    --color-meta: var(--md-text-muted);
    --color-quote-border: var(--md-accent);
    --color-quote-citation: var(--md-text-muted);
    --color-footer-title: var(--md-text);
    --color-footer-content: var(--md-text-muted);
    --color-footer-link: var(--md-text);
    --color-footer-link-hover: var(--md-accent-text);
    --color-copyright-bg: var(--md-bg);
    --color-copyright-content: var(--md-text-muted);
    --color-copyright-link: var(--md-text);
    --color-copyright-link-hover: var(--md-accent-text);
    --button-background-color: var(--md-primary);
    --button-background-hover-color: var(--md-primary-hover);
    --button-border-color: var(--md-primary);
    --button-border-hover-color: var(--md-primary-hover);
    --button-text-color: var(--md-on-primary);
    --button-text-hover-color: var(--md-on-primary);

    /* WordPress font presets of the theme (theme.json): body and the bare
       h1-h3 rules of WordPress read the first one */
    /* stylelint-disable-next-line custom-property-pattern -- WordPress's own preset name */
    --wp--preset--font-family--inter: var(--md-font-ui);
    /* stylelint-disable-next-line custom-property-pattern -- WordPress's own preset name */
    --wp--preset--font-family--newsreader: var(--md-font-serif);
}