/* ================================================================
   themes/default.css — the site's standing colour scheme

   Layer 1: --palette-*  primitive colours owned by this theme.
   Layer 2: semantic tokens (--page-bg, --brand-primary, ...) that
            components consume. Components must never name a palette
            colour directly.

   Matched on :root as well as [data-theme="default"] so every token has
   a value even when an unknown theme name is rendered, and so a theme
   that omits a token inherits this one rather than falling back to an
   unstyled colour.
   ================================================================ */

:root,
[data-theme="default"] {
    /* ── Primitive palette ───────────────────────────────────────── */
    --palette-white:          #FFFFFF;
    --palette-lavender-white: #FDFAFF;
    --palette-mist:           #EEF0F8;
    --palette-periwinkle:     #DFE2F2;
    --palette-lavender-gray:  #C8C4DC;
    --palette-steel:          #A8ADBF;

    --palette-slate-light:    #8AA4B8;
    --palette-slate:          #3D5A72;
    --palette-slate-gray:     #5A6A7A;
    --palette-navy:           #1A2E42;

    --palette-berry:          #C7496B;
    --palette-berry-light:    #E06882;
    --palette-berry-deep:     #B03460;
    --palette-berry-darker:   #9B3056;
    --palette-berry-shade:    #8B3A5C;
    --palette-berry-tint:     #E88FA8;
    --palette-berry-bright:   #FD9ACA;
    --palette-berry-rose:     #D65D7F;
    --palette-blush:          #F0ABB8;
    --palette-blush-light:    #F8CDD5;

    --palette-sage:           #5BA870;
    --palette-sage-deep:      #3A7D52;
    --palette-gold:           #C8A83C;
    --palette-gold-deep:      #7A6020;
    --palette-brick:          #C0392B;
    --palette-brick-light:    #E05C5C;
    --palette-azure:          #4B8FE0;
    --palette-azure-deep:     #2C5F9E;
    --palette-violet:         #7C6AF7;

    /* Warm "paper" family used by long-form reading surfaces. */
    --palette-paper:          #FAF6F2;
    --palette-paper-alt:      #F4EFE9;
    --palette-parchment:      #ECE6E0;
    --palette-parchment-alt:  #E8E2DB;
    --palette-kraft:          #E3DDD6;
    --palette-ink:            #2F2F2F;
    --palette-ink-soft:       #4A4A4A;
    --palette-ink-mid:        #5F5F5F;
    --palette-ink-muted:      #6B6B6B;
    --palette-ink-faint:      #8A8A8A;

    /* Plain greys, for surfaces that read as print rather than as brand. */
    --palette-gray:       #666666;
    --palette-gray-light: #999999;
    --palette-gray-line:  #CCCCCC;

    /* ── Page & surfaces ─────────────────────────────────────────────
       --body-bg is the canvas behind everything; --page-bg is the tinted
       band components fill with. They are different surfaces: the site has
       always drawn white behind a lavender section, not lavender behind a
       lavender section. Bootstrap used to supply the canvas via
       --bs-body-bg, which no theme could reach. */
    --body-bg:            var(--palette-white);
    /* Bootstrap's own body ink, kept verbatim so the default theme's
       unstyled text does not shift. Not --text-primary: that is the site's
       navy, which body text has never actually been. */
    --body-text:          #212529;
    --page-bg:            var(--palette-mist);
    --surface-bg:         var(--palette-lavender-white);
    --surface-raised:     var(--palette-white);
    --surface-muted:      var(--palette-periwinkle);
    --surface-sunken:     var(--palette-mist);
    --surface-inverse:       var(--palette-navy);
    --surface-inverse-deep:  #0D1E2E;
    --surface-inverse-hover: #243D56;
    --surface-inverse-text:  var(--palette-white);
    /* Second stop for a dark gradient, and a dark hover bed. Aliased to a text
       token here only because that is what those rules used to name. */
    --surface-inverse-alt:   var(--text-secondary);
    --scrim-rgb:          26, 46, 66;
    --scrim:              rgba(var(--scrim-rgb), 0.75);

    /* ── Section rhythm ──────────────────────────────────────────────
       A long page alternates bands, and until now four of those bands all
       drew from --page-bg while three more drew from --surface-bg. That is
       fine for a theme whose neutrals are near-white, but it leaves a theme
       with a tinted ground no way to give the page any rhythm — every band
       moves together. These split the roles apart. Each one aliases the
       value its band resolved to before, so this theme is unchanged. */
    --hero-bg:           var(--surface-bg);
    --band-bg:           var(--page-bg);
    --band-border:       var(--surface-muted);
    --section-alt-bg:    var(--surface-bg);
    --section-dark-bg:   var(--text-primary);
    --card-fill:         var(--page-bg);
    --card-fill-border:  var(--surface-muted);
    /* The band's own muted ink. A band that takes a saturated fill cannot
       keep using --text-subtle, which is tuned for a near-white ground. */
    --band-text-muted:   var(--text-subtle);
    --btn-secondary-fill:       var(--page-bg);
    --btn-secondary-fill-hover: var(--surface-muted);

    /* Neutral translucent fills — inline button beds, inactive chips. */
    --fill-neutral:      rgba(139, 152, 170, 0.10);
    --chip-inactive-bg:  rgba(204, 200, 228, 0.50);
    --card-border:       rgba(212, 196, 172, 0.40);
    --outline-danger:    rgba(192, 90, 43, 0.30);
    --outline-accent:    rgba(180, 150, 80, 0.35);

    /* Event hero when no cover image was uploaded: a warm table-top wash. */
    --hero-fallback-from: #D4B896;
    --hero-fallback-mid:  #C4A07A;
    --hero-fallback-to:   #B8906A;

    /* Warm ink laid over a photo or a dark band (the recommend panel). */
    --on-inverse-warm-rgb: 253, 250, 246;

    /* ── Long-form reading surfaces (blog) ───────────────────────── */
    --editorial-bg:          var(--palette-paper);
    --editorial-surface:     var(--palette-white);
    --editorial-surface-alt: var(--palette-paper-alt);
    --editorial-fill:        var(--palette-parchment);
    --editorial-fill-alt:    var(--palette-parchment-alt);
    --editorial-border:      var(--palette-kraft);
    --editorial-text:        var(--palette-ink);
    --editorial-text-soft:   var(--palette-ink-soft);
    --editorial-text-mid:    var(--palette-ink-mid);
    --editorial-text-muted:  var(--palette-ink-muted);
    --editorial-text-faint:  var(--palette-ink-faint);
    --editorial-text-strong: #3F3F3F;
    --editorial-text-dim:    #9A9A9A;
    --editorial-border-soft: #EFE8E0;
    --editorial-border-dash: #EEE5DC;
    --editorial-hover-fill:  #ECE6DF;
    --editorial-media-bg:    #F4EFE9;
    --editorial-rule:        var(--palette-gray-line);
    /* The article block itself. Transparent here: the default theme's blog has
       always read as ink on warm paper, with no card under the prose. */
    --editorial-article-bg:     transparent;
    --editorial-article-radius: 0;
    --editorial-article-pad-b:  0;

    /* Soft brand-tinted CTA panel inside an article. */
    --editorial-cta-from:   #FDF3F6;
    --editorial-cta-to:     var(--palette-paper);
    --editorial-cta-border: #F0DFE5;

    /* Editorial status chips (draft/paused/retired) and the preview bar. */
    --editorial-notice-bg:     #FDF6E7;
    --editorial-notice-border: #F0E2C0;
    --editorial-notice-text:   #7A6320;
    --editorial-paused-bg:     #FDF6E3;
    --editorial-paused-fg:     #8A6A14;
    --editorial-paused-dot:    #B8860B;
    --editorial-retired-bg:    #F1F3F7;
    --editorial-retired-fg:    #55697F;
    --editorial-retired-dot:   #6B7D92;
    --editorial-ghost-bg:      #F5F1EC;
    --preview-bar-bg:   #F0A844;
    --preview-bar-text: #2A1A05;

    /* ── Gate pages (alpha gate, beta pregame) ───────────────────────
       Standalone dark panels that never sit on the app's light chrome, so
       they carry their own surface scale rather than inverting the page's. */
    --gate-bg:            #0F0D14;
    --gate-surface:       #1A1726;
    --gate-surface-hover: #1E1A2E;
    --gate-field-bg:      #110F1A;
    --gate-border:        rgba(var(--on-inverse-rgb), 0.10);
    --gate-border-strong: rgba(var(--on-inverse-rgb), 0.16);
    --gate-text:          #E8E4F0;
    --gate-text-mid:      #9B8FB0;
    --gate-text-muted:    #7C6F94;
    --gate-text-faint:    #4D4468;
    --gate-placeholder:   #3D3654;
    --gate-accent:        #D4A843;
    --gate-accent-text:   #111111;
    --gate-success:       #4AAD7A;
    --gate-success-rgb:   74, 173, 122;
    --gate-info:          #6496FF;
    --gate-info-rgb:      100, 150, 255;
    --gate-danger-fg:     #F08080;
    --gate-danger-solid:  #E05C5C;
    --gate-danger-bg:     rgba(224, 92, 92, 0.10);
    --gate-danger-border: rgba(224, 92, 92, 0.30);

    /* ── Text ────────────────────────────────────────────────────── */
    --text-primary:    var(--palette-navy);
    --text-secondary:  var(--palette-slate);
    --text-subtle:     var(--palette-slate-gray);
    --text-muted:      var(--palette-slate-light);
    --text-faint:      var(--palette-steel);
    --text-inverse:    var(--palette-white);
    --text-on-brand:   var(--palette-white);
    --text-on-accent:  var(--palette-navy);
    --text-neutral:       var(--palette-gray);
    --text-neutral-faint: var(--palette-gray-light);
    --border-neutral:     var(--palette-gray-line);

    /* Ink laid over a dark or brand-filled surface. Themes change the
       triple, not the alpha, so every translucent layer moves together. */
    --on-inverse-rgb: 255, 255, 255;
    /* The same ink over a brand fill. Split from --on-inverse-rgb for themes
       whose brand is bright enough to need dark ink on it. */
    --on-brand-rgb:   var(--on-inverse-rgb);
    /* Hover ink for links on an inverse ground. Split out so a theme can put
       a warm accent here without touching --text-inverse, which is white in
       every theme and used on far more than links. */
    --link-on-inverse-hover: var(--text-inverse);
    /* The footer wordmark's hover. A theme whose brand is darker than its
       footer points this somewhere legible instead. */
    --footer-brand-hover:    var(--palette-berry-light);
    --footer-tagline:        rgba(var(--on-inverse-rgb), 0.5);
    /* Eyebrow/section label on an inverse ground. The default theme's brand
       is bright enough to sit straight on navy; a theme whose brand is darker
       than its own dark band needs somewhere else to point. */
    --label-on-inverse: rgba(var(--brand-primary-rgb), 0.9);

    /* ── Borders ─────────────────────────────────────────────────── */
    --border-subtle:   var(--palette-periwinkle);
    --border-default:  var(--palette-lavender-gray);
    --border-strong:   var(--palette-steel);
    --divider:         var(--palette-periwinkle);

    /* ── Brand ───────────────────────────────────────────────────── */
    --brand-primary:        var(--palette-berry);
    --brand-primary-rgb:    199, 73, 107;
    /* Darker on hover: white text measures 3.2:1 on the lighter pink. */
    --brand-primary-hover:  var(--palette-berry-deep);
    --brand-primary-active: var(--palette-berry-deep);
    --brand-primary-deep:   var(--palette-berry-darker);
    --brand-primary-shade:  var(--palette-berry-shade);
    --brand-primary-tint:   var(--palette-berry-tint);
    --brand-on-inverse:     var(--palette-berry-bright);
    --brand-on-inverse-hover: var(--palette-berry-rose);
    --brand-primary-subtle: rgba(var(--brand-primary-rgb), 0.08);
    --brand-primary-soft:   rgba(var(--brand-primary-rgb), 0.15);

    --brand-secondary:      var(--palette-sage);
    --brand-secondary-rgb:  91, 168, 112;
    --brand-secondary-subtle: rgba(var(--brand-secondary-rgb), 0.12);

    --brand-tertiary:       var(--palette-violet);

    /* Far stop of the initials-avatar gradient, which starts at the brand and
       carries --text-on-brand. */
    --avatar-gradient-to:   var(--text-secondary);

    /* ── Accents ─────────────────────────────────────────────────── */
    --accent-primary:        var(--palette-gold);
    --accent-primary-rgb:    200, 168, 60;
    --accent-primary-subtle: rgba(var(--accent-primary-rgb), 0.12);
    --accent-primary-hover:  #AA8A28;
    --accent-secondary:      var(--palette-blush);
    --accent-secondary-rgb:  240, 171, 184;
    --accent-secondary-light: var(--palette-blush-light);

    /* Decorative accent roles, for icon washes and small ornament. Kept
       apart from --status-* so a theme can tint them seasonally without
       touching a colour that carries meaning: --accent-tertiary is what
       the feature icons used to take from --status-info-solid, which made
       a decorative glyph and an "info" state impossible to retheme apart. */
    --accent-harvest:     var(--brand-primary);
    --accent-harvest-rgb: var(--brand-primary-rgb);
    --accent-gold:        var(--accent-primary);
    --accent-gold-rgb:    var(--accent-primary-rgb);
    --accent-tertiary:     var(--status-info-solid);
    --accent-tertiary-rgb: var(--status-info-rgb);
    --accent-harvest-subtle: var(--brand-primary-subtle);

    --highlight-bg:   var(--palette-blush-light);
    --highlight-text: var(--palette-navy);

    /* ── Links ───────────────────────────────────────────────────── */
    --link-color:       var(--brand-primary);
    --link-hover:       var(--brand-primary-active);

    /* ── Actions ─────────────────────────────────────────────────── */
    --action-primary-bg:     var(--brand-primary);
    --action-primary-text:   var(--text-on-brand);
    --action-primary-hover:  var(--brand-primary-hover);
    --action-primary-active: var(--brand-primary-active);

    --action-secondary-bg:     transparent;
    --action-secondary-text:   var(--text-secondary);
    --action-secondary-border: var(--border-default);
    --action-secondary-hover:  var(--surface-muted);

    --action-ghost-text:     var(--text-secondary);
    --action-ghost-hover-bg: var(--surface-sunken);

    /* Destructive actions keep Bootstrap's red in every theme: a delete
       button that turns seasonal stops reading as a warning. */
    --action-danger-rgb:    244, 67, 54;
    --action-danger-bg:     rgb(var(--action-danger-rgb));
    --action-danger-text:   var(--palette-white);
    --action-danger-hover:  #A71D2A;

    --action-neutral-bg:   var(--palette-slate);
    --action-neutral-text: var(--palette-white);

    /* Buy Me a Coffee's own button colours, the same in every theme. */
    --action-coffee-bg:   #CCFFE5;
    --action-coffee-text: #000000;

    --action-disabled-bg:     var(--palette-periwinkle);
    --action-disabled-text:   var(--palette-steel);
    --action-disabled-border: var(--palette-lavender-gray);

    /* ── Status. Deliberately NOT seasonal: danger must read as danger
          in every theme. Themes may nudge the tint, never the hue. ── */
    --status-success-fg:     var(--palette-sage-deep);
    --status-success-solid:  var(--palette-sage);
    --status-success-bg:     rgba(var(--status-success-rgb), 0.15);
    --status-success-border: rgba(var(--status-success-rgb), 0.35);

    --status-warning-fg:     var(--palette-gold-deep);
    --status-warning-solid:  var(--palette-gold);
    --status-warning-bg:     rgba(var(--status-warning-rgb), 0.14);
    --status-warning-border: rgba(var(--status-warning-rgb), 0.40);

    --status-danger-fg:      var(--palette-brick);
    --status-danger-solid:   var(--palette-brick);
    --status-danger-text:    var(--palette-white);
    --status-danger-hover:   #A93226;
    --status-danger-bg:      rgba(var(--status-danger-rgb), 0.10);
    --status-danger-border:  rgba(var(--status-danger-rgb), 0.35);

    --status-info-fg:        var(--palette-azure-deep);
    --status-info-solid:     var(--palette-azure);
    --status-info-bg:        rgba(var(--status-info-rgb), 0.12);
    --status-info-border:    rgba(var(--status-info-rgb), 0.35);

    /* Amber caution — louder than --status-warning, used where an action is
       about to destroy something and for moderate allergen severity. */
    --status-caution-fg:     #B87A20;
    --status-caution-solid:  rgb(var(--status-caution-rgb));
    --status-caution-bg:     rgba(var(--status-caution-rgb), 0.15);
    --status-caution-border: rgba(var(--status-caution-rgb), 0.40);

    /* Allergen severity. Ordered high > medium > low and deliberately kept
       out of the seasonal palette: these warn about food safety. */
    --severity-high-fg:     #E07050;
    --severity-high-rgb:    224, 112, 80;
    --severity-high-bg:     rgba(var(--severity-high-rgb), 0.15);
    --severity-high-wash:   rgba(var(--severity-high-rgb), 0.06);
    --severity-high-border: rgba(var(--severity-high-rgb), 0.18);
    --severity-low-fg:      #4A7A4A;
    --severity-low-bg:      rgba(138, 180, 138, 0.12);

    /* Inline notice panels (unverified email, forfeiture warning). */
    --notice-warn-bg:      #FDF6E7;
    --notice-warn-border:  #F0DFB4;
    --notice-warn-icon:    #B07C1A;
    --notice-urgent-bg:     #FDF2F5;
    --notice-urgent-border: #F0C7D3;

    --toggle-track-off: #7B94A8;
    --toggle-knob:      var(--surface-raised);

    --status-neutral-fg:     #5A7090;
    --status-neutral-bg:     rgba(100, 120, 150, 0.10);
    --status-neutral-border: var(--border-subtle);

    --status-success-rgb: 91, 168, 112;
    --status-caution-rgb: 240, 168, 68;
    --status-warning-rgb: 200, 168, 60;
    --status-danger-rgb:  192, 57, 43;
    --status-info-rgb:    75, 143, 224;

    /* Soft two-stop washes behind status illustrations (error pages). */
    --status-warning-wash:      #FFF3E0;
    --status-warning-wash-deep: #FFE0B2;
    --status-warning-icon:      #E67E22;
    --status-info-wash:         #E8F0FE;
    --status-info-wash-deep:    #D5E3F7;
    --status-danger-wash:       #FDE8E8;
    --status-danger-wash-deep:  #FCD5CE;

    /* Feature-flag states on /about/features. Distinct from the status
       colours above: these describe a roadmap position, not an outcome. */
    --flag-proposed-fg: #7040BD;
    --flag-proposed-bg: rgba(140, 100, 220, 0.13);
    --flag-off-fg:      #8C3A14;
    --flag-off-bg:      rgba(160, 60, 20, 0.10);

    /* "New" badge — the one nav pill that is not brand-coloured. */
    --badge-new-bg:     #F4EEF7;
    --badge-new-border: #D9C4E8;
    --badge-new-text:   #7B3FA0;

    /* Sponsored/affiliate marks and loading placeholders. */
    --sponsored-accent:      #1B6B38;
    --oauth-github-mark:     #24292F;
    --media-placeholder-bg:  #F5F0E8;
    --media-placeholder-icon: var(--palette-gray-line);
    --skeleton-base:  #ECE8E2;
    --skeleton-shine: #F5F2EE;

    /* ── Forms ───────────────────────────────────────────────────── */
    --field-bg:            var(--surface-raised);
    --field-text:          var(--text-primary);
    --field-border:        var(--border-default);
    --field-border-focus:  var(--brand-primary);
    --field-placeholder:   var(--text-muted);
    --field-focus-ring:    rgba(var(--brand-primary-rgb), 0.15);
    --field-disabled-bg:   #F5F5F5;
    --field-disabled-text: var(--text-faint);

    --focus-ring: var(--brand-primary);

    /* ── Elevation ───────────────────────────────────────────────── */
    --shadow-color-rgb: 26, 46, 66;
    --shadow-ambient-rgb: 0, 0, 0;
    --shadow-sm: 0 2px 8px rgba(var(--shadow-color-rgb), 0.08);
    --shadow:    0 6px 24px rgba(var(--shadow-color-rgb), 0.10);
    --shadow-lg: 0 16px 48px rgba(var(--shadow-color-rgb), 0.14);

    /* ── Bootstrap bridge ────────────────────────────────────────────
       Bootstrap ships its own component colours as literals, so 57 stock
       .btn-primary instances render Bootstrap blue no matter what the site's
       tokens say. base.css re-points Bootstrap's component variables at the
       tokens below; the default theme repeats Bootstrap's own values, so
       nothing moves here — a seasonal theme overrides them and the stock
       components come along. */
    --bs-link:            #0D6EFD;
    --bs-link-hover:      #0A58CA;
    --bs-code:            #D63384;

    --bs-primary-bg:      #0D6EFD;
    --bs-primary-fg:      #FFFFFF;
    --bs-primary-border:  #0D6EFD;
    --bs-primary-hover:   #0B5ED7;
    --bs-primary-active:  #0A58CA;
    --bs-primary-focus-rgb: 49, 132, 253;

    --bs-secondary-bg:     #6C757D;
    --bs-secondary-fg:     #FFFFFF;
    --bs-secondary-border: #6C757D;
    --bs-secondary-hover:  #5C636A;
    --bs-secondary-active: #565E64;
    --bs-secondary-focus-rgb: 130, 138, 145;

    /* Field chrome. Focus ring included: an invisible focus indicator is a
       keyboard trap, so a theme must restate it, not drop it. */
    --bs-field-bg:           #FFFFFF;
    --bs-field-fg:           #212529;
    --bs-field-border:       #CED4DA;
    --bs-field-focus-border: #86B7FE;
    --bs-field-focus-rgb:    13, 110, 253;
    --bs-field-disabled-bg:  #E9ECEF;
    --bs-file-btn-bg:        #E9ECEF;
    --bs-file-btn-fg:        #212529;
    --bs-file-btn-hover:     #DDE0E3;
    --form-error-text:       var(--action-danger-bg);

    /* Alert tints. Themes may warm these; the hue stays with the meaning. */
    --bs-alert-success-fg: #0F5132; --bs-alert-success-bg: #D1E7DD; --bs-alert-success-border: #BADBCC;
    --bs-alert-info-fg:    #055160; --bs-alert-info-bg:    #CFF4FC; --bs-alert-info-border:    #B6EFFB;
    --bs-alert-warning-fg: #664D03; --bs-alert-warning-bg: #FFF3CD; --bs-alert-warning-border: #FFECB5;
    --bs-alert-danger-fg:  #842029; --bs-alert-danger-bg:  #F8D7DA; --bs-alert-danger-border:  #F5C2C7;
    --bs-alert-secondary-fg: #41464B; --bs-alert-secondary-bg: #E2E3E5; --bs-alert-secondary-border: #D3D6D8;

    /* ── Admin console (staff-only dark surface) ─────────────────── */
    --adm-bg-base:     #0D1421;
    --adm-bg-base-rgb: 13, 20, 33;
    --adm-bg-sidebar: #111827;
    --adm-bg-card:    #1A2535;
    --adm-bg-card-lt: #212E42;
    --adm-border:     rgba(255, 255, 255, 0.07);
    --adm-text:       #E2E8F0;
    --adm-text-mid:   #8FA3BF;
    --adm-text-lt:    #536D8A;
    --adm-on-accent:  var(--palette-white);
    --adm-accent:     var(--palette-berry);
    --adm-accent-rgb: var(--brand-primary-rgb);
    --adm-accent-lt:  var(--palette-berry-light);
    --adm-accent-soft: #E87FA0;
    --adm-green:      #3FC98B;
    --adm-green-rgb:  63, 201, 139;
    --adm-gold:       #F0A844;
    --adm-gold-rgb:   240, 168, 68;
    --adm-gold-soft:  #F3D9A4;
    --adm-blue:       #4B8FE0;
    --adm-blue-rgb:   75, 143, 224;
    --adm-blue-soft:  #8AB4F8;
    --adm-on-medal:   #1A1A2E;
    --adm-medal-silver: #A0A8B8;
    --adm-medal-bronze: #CD7F32;
    --adm-badge-rust-bg: rgba(200, 90, 60, 0.18);
    --adm-badge-rust-fg: var(--severity-high-fg);
}