/*
 * GSGO — theme tokens (the light "SGO" palette; this IS the base theme).
 *
 * Every colour on the site is a custom property defined here. app.css contains
 * no colour literals — it only consumes these tokens, and templates never carry
 * inline colours. A single active theme; a future dark/other theme is just
 * another file overriding these on a [data-theme] selector (see git history for
 * the retired warm-charcoal dark.css).
 *
 * body.layout-admin swaps the accent family to RED — the admin identity — on
 * the same light theme.
 */
:root {
    /* --- core --- */
    /* The greys came up one notch (page #cccccd → #d8d8da, and the chrome
       ladder above it by the same amount) because the member shell paints no
       panel behind its content — #main and #main-wrap are transparent, the
       "content drifts over grey" composition — so THIS is the ground every
       link, handle and timestamp is read against, and with underlines gone
       colour is all they have. It is a notch, not a floodlight: the ladder
       keeps every step it had, the brightest surface on the site is #f0f0f3
       rather than white, and total lift is ~8% of the way to white. A dark
       theme is the real answer for reading in bed (see git history for the
       retired warm-charcoal one) — this is not trying to be that. */
    --page-bg: #d8d8da;                            /* body ground */
    --main-wrap-bg: #dadadc;                       /* area behind the scrolling panel */
    --main-bg: #f0f0f3;           /* the #main panel; watermark shows through */
    --text: #23232a;
    --heading: #15151a;
    --heading-h1: #0d0d10;
    /* Green dark enough to read on the grey. #008a12 measured 3.66:1 on the
       #main panel and 2.82:1 on the page ground — under AA, and with no
       underline left to carry the link it was the only signal there was.
       This pair is 5.85:1 / 4.50:1, and the hover step is the same
       perceptual distance the old pair had (ΔE 16 against 15), so hover is
       still visible to a human eye. */
    --link: #00660d;
    --link-hover: #004a0a;
    --border: #cfcfd4;
    --border-soft: #dedee2;
    --muted: #5f5f68;
    --bg-alt: #d9d9dd;
    --scrollbar-thumb: #bcbcc2;                    /* track stays transparent */
    --scrollbar-thumb-hover: #a6a6ad;
    --accent: #009100;
    --accent-edge: #4a3220;
    --on-accent: #fff;
    --ok: #3d5a2a;
    --warn: #8a5a00;
    --danger: #a33;
    --danger-strong: #b5493f;
    --info: #7d93b3;
    --on-danger: #fff;

    /* --- header (guest-top + navbar) --- */
    --header-bg: #ececed;
    --header-fg: #23232a;
    --header-border: #c4c4c8;                      /* guest-top underline */
    --navbar-border: #c4c4c8;                      /* member navbar underline */
    --header-link: #3a3a42;
    --header-link-hover: #006e0e;
    --header-link-hover-bg: #dcdcde;
    --header-link-dim: #55555c;                    /* nav user name */
    --header-link-soft: #3a3a42;                   /* nav user links */
    --header-strong: #0d0d10;                         /* lang-switch current */

    /* --- sidebar --- */
    --sidebar-bg: #e2e2e4;
    --sidebar-border: #c9c9cd;
    --sidebar-section-border: #bbb;
    --sidebar-heading: #7a7a82;
    --sidebar-link: #3a3a42;
    --sidebar-hover-bg: #d1d1d4;
    --sidebar-active-bg: #c8c8cc;
    --sidebar-active-fg: #006e0e;

    /* --- surfaces --- */
    --panel-bg: #f0f0f3;
    --guest-panel-bg: #f0f0f3;                        /* guest layout panels */
    --panel-inset-bg: #ececef;
    /* Thread header: one step down from --panel-bg, so the head of a thread
       reads as its own surface rather than as the first post of it. */
    --forum-head-bg: #e9e9ed;
    --panel-inset-border: #dcdce0;
    --card-bg: #f4f4f7;                               /* media cards, hover ground */
    --card-hover-bg: #fafafc;
    --dropdown-hover-bg: #f8f8fa;                     /* topnav user-menu row hover */
    --card-hover-fg: #0d0d10;
    --tile-bg: #e7e7ea;                            /* photo tiles, member cards */
    --list-bg: #f0f0f3;                               /* notification list */
    --unread-bg: #dfeadf;
    --field-row-bg: #fff;
    --preview-pane-bg: #fff;                       /* field-builder live preview */
    --splat-bg: #fff;
    --album-card-bg: #fff;
    --dev-panel-bg: #fff;                          /* /dev/mail preview */
    --image-bg: #ddd;                              /* image/avatar placeholder while loading */
    --thumb-bg: #2b2b28;                           /* photo-thumb mount */
    --empty-bg: #dedee1;                           /* avatar placeholder */
    /* Ground behind the placeholder boots (no cover yet, and locked).
       Was #c8c8b8, then #dcdcd4 — both khaki, and khaki is not in this
       palette: every grey here runs COOL, with blue the highest channel.
       Those two put blue lowest, which is the whole of what made them read
       as a different site. #dcdce0 is --table-head-bg's value, i.e. a
       neutral already in use at this lightness. */
    --album-empty-bg: #dcdce0;
    --code-bg: #e3e3e6;
    --code-border: #d6d6da;
    --code-fg: #2a2a30;
    --table-head-bg: #e5e5e9;
    --stripe-bg: rgba(0, 0, 0, 0.028);                      /* zebra rows */
    --panel-attention-bg: #f6efe6;
    --chip-bg: #dcdce0;
    --chip-fg: #3a3a42;
    --card-heading: #00660d;                          /* member-card name */
    --card-heading-hover: #004a0a;
    --pager-bg: rgba(0, 0, 0, 0.05);
    --pager-hover-bg: #e2e2e5;
    --pager-current-fg: #ffffff;

    /* --- buttons --- */
    --btn-bg: #e6e6e9;
    --btn-fg: #23232a;
    --btn-border: #cccccf;
    --btn-hover-bg: #dcdce0;
    --btn-hover-fg: #0d0d10;
    --btn-ok-border: #2a3f1c;
    --btn-warn-bg: #844;
    --btn-warn-border: #522;
    --btn-danger-bg: #400;
    --btn-danger-border: #200;
    --btn-ghost-bg: #f0e0e0;
    --btn-ghost-border: #b08080;
    --btn-ghost-fg: #5a2020;
    --btn-ghost-hover-bg: #e0d0d0;
    --btn-ghost-hover-fg: #400;

    /* --- inputs --- */
    --input-bg: #f2f2f4;
    --input-fg: #23232a;
    --input-border: #c4c4c9;

    /* --- badges --- */
    --badge-bg: #23232a;
    --badge-fg: #f4f4f5;
    --badge-border: transparent;
    --badge-border-top: transparent;
    --badge-border-left: transparent;
    --badge-shadow: transparent;

    /* --- toast / flash (dark surfaces in both themes) --- */
    --toast-bg: #2b271f;
    --toast-fg: #e7e1d3;
    /* Success bar on a toast. NOT --accent: the admin shell swaps the accent
       family to red for identity, which made every success toast in the red
       shell look exactly like a failure one (F55). Toasts keep their own dark
       ground in both shells, so this is picked to read against that. */
    --toast-ok: #5aa02c;
    --toast-shadow: rgba(0, 0, 0, 0.45);
    --toast-thumb-bg: #1c1a15;

    /* --- sidebar staff alert (member shell) --- */
    --nav-alert-bg: #e0e0e3;
    --nav-alert-border: #cbcbcf;
    --nav-alert-fg: #23232a;
    --nav-alert-hover-bg: #d6d6d9;

    /* --- admin red shell (same values in both themes) --- */
    --admin-banner-bg: #8b2e2e;
    --admin-banner-fg: #fff;
    --admin-banner-border: #5a1818;
    --admin-badge-fg: #5a1010;
    --admin-badge-bg: #f8e8e8;
    --admin-badge-border: #8b2e2e;
    --admin-badge-border-top: #fff;
    --admin-badge-shadow: #d0a0a0;
    --admin-nav-alert-bg: #4d1e1e;
    --admin-nav-alert-border: #a54848;
    --admin-nav-alert-hover-bg: #5c2626;
    --admin-appeal-staff-bg: #2f2320;
    --admin-appeal-staff-border: #4a2c2c;

    /* --- appeal hovercard (Web 2.0 pink, both themes) --- */
    --hovercard-bg: #fff8f8;
    --hovercard-border: #8b2e2e;
    --hovercard-shadow: rgba(90, 24, 24, 0.25);
    --hovercard-head-border: #d0a8a8;
    --hovercard-label: #6a4444;
    --hovercard-body-bg: #fff;
    --hovercard-body-border: #e0c0c0;
    --appeal-snip-border: #a07070;

    /* --- lightbox (photos = product: dark in both themes) --- */
    --lightbox-bg: rgba(0, 0, 0, 0.9);
    --lightbox-stage-bg: #111;
    --lightbox-stage-border: #333;
    --lightbox-img-border: #ccc;
    --lightbox-caption: #ddd;
    --lightbox-counter: #999;
    --lightbox-owner: #cdd8bf;
    --lightbox-hint: #777;
    --lightbox-level: #bbb;
    --lightbox-nav-fg: #ddd;
    --lightbox-nav-bg: rgba(255, 255, 255, 0.06);
    --lightbox-nav-border: rgba(255, 255, 255, 0.16);
    --lightbox-nav-hover-bg: rgba(255, 255, 255, 0.16);
    --lightbox-nav-hover-fg: #fff;
    --lightbox-btn-bg: rgba(255, 255, 255, 0.08);
    --lightbox-btn-border: rgba(255, 255, 255, 0.2);
    --lightbox-btn-hover-bg: rgba(255, 255, 255, 0.2);
    --lightbox-btn-hover-fg: #fff;
}

/* Admin identity: same light theme, accent family swapped to red. */
body.layout-admin {
    --accent: #b21f1f;
    --card-heading: #b21f1f;
    --card-heading-hover: #8c1818;
    --link: #b21f1f;
    --link-hover: #8c1818;
    --sidebar-active-fg: #b21f1f;
    --unread-bg: #f4e2e2;
}