/* ============================================================================
   SECT THEME - the whole site takes its accent colour from the chronicle's sect.
   ============================================================================

   The Master Storyteller picks the sect on the ST dashboard's Chronicle tab.
   js/sect-theme.js stamps that choice onto <html data-sect="...">, and everything
   below follows from that one attribute.

   HOW THIS REACHES THE WHOLE SITE WITHOUT REWRITING THE WHOLE SITE:
   css/theme.css already defines the palette as custom properties, and most of the
   newer stylesheets are written against them (builder-layout.css alone uses var()
   138 times). So rather than hunting down every rule, this file REDEFINES those
   existing variables per sect. Any rule already written as var(--blood-red) themes
   itself. Only genuinely hardcoded hex values need touching by hand.

   WHY THERE ARE CHANNEL VARIABLES (the -rgb names):
   Roughly 70 of the hardcoded brand colours are rgba() fills and glows at many
   different alphas - rgba(139,0,0,.18), rgba(139,0,0,.5), and so on. A plain hex
   variable cannot carry a per-use alpha, so each ramp also publishes its channels
   as a bare "r, g, b" list. Those sites become rgba(var(--sect-deep-rgb), .18)
   and keep their own transparency while following the sect.

   WHAT DELIBERATELY DOES NOT FOLLOW THE SECT:
   Red that means DANGER rather than "Sabbat" stays red in every chronicle -
   health and damage boxes, delete and remove buttons, error and validation text,
   flaw penalties, torpor. A blue "aggravated damage" marker in a Camarilla game
   would be a usability bug, not a theme. Likewise --accent-purple, --accent-gold
   and --accent-green keep their meanings, and the blue --border-glow stays as the
   deliberate cool counterpoint theme.css introduced it as.

   CONTRAST IS NOT DECORATIVE HERE. The ground is #0d0508, and the accent is used
   for headings and links, so the "bright" rung of each ramp must clear WCAG AA
   (4.5:1) for body text. Measured against #0d0508:
       Sabbat    #ef4444  5.35:1
       Camarilla #2b8fd9  5.79:1
       Anarch    #2fa85c  6.60:1
   They sit in a deliberately narrow band so no sect reads as louder than another.
   NOTE: the old --blood-red-bright was #c00000 at only 3.11:1, which FAILED for
   body text. Pointing it at the Sabbat ramp's #ef4444 fixes that, so some existing
   Sabbat headings and links get visibly brighter. That is the a11y fix, not drift.
   ============================================================================ */

/* ---- the three ramps ---------------------------------------------------- */

:root,
[data-sect="sabbat"] {
    --sect-key:     "sabbat";
    --sect-label:   "The Sabbat";
    --sect-deeper:  #6b0000;   /* gradient floor                              */
    --sect-deep:    #8b0000;   /* fills, solid buttons                        */
    --sect-light:   #a00000;   /* hovers, secondary fills                     */
    --sect-bright:  #ef4444;   /* TEXT and links - AA against the dark ground */
    --sect-muted:   #5c1a28;   /* card tint                                   */
    --sect-wine:    #3d0f16;   /* deepest section tint                        */

    --sect-deep-rgb:   139, 0, 0;
    --sect-light-rgb:  160, 0, 0;
    --sect-bright-rgb: 239, 68, 68;
    --sect-muted-rgb:  92, 26, 40;
    --sect-wine-rgb:   61, 15, 22;
    --sect-border-rgb: 140, 80, 100;

    --sect-glow:    rgba(200, 0, 0, 0.35);
    --sect-border:  rgba(140, 80, 100, 0.35);
    /* Pass-2 roles: near-palette brand shades that the six-colour sweep did not
       reach - page and panel grounds, the challenge chrome, the auth links. Each
       is the Sabbat literal rotated to this sect's hue at identical lightness and
       saturation, so only the colour moves and never the depth. */
    --sect-ground-rgb:          13, 5, 8;
    --sect-ground-deep-rgb:     10, 3, 5;
    --sect-bar-rgb:             20, 8, 12;
    --sect-bar-deep-rgb:        13, 5, 8;
    --sect-auth-bg-rgb:         26, 10, 10;
    --sect-auth-bg-2-rgb:       26, 10, 15;
    --sect-auth-panel-rgb:      25, 15, 20;
    --sect-link-rgb:            180, 100, 100;
    --sect-link-hover-rgb:      200, 100, 100;
    --sect-app-glow-1-rgb:      90, 30, 50;
    --sect-app-glow-2-rgb:      60, 20, 40;
    --sect-app-glow-3-rgb:      80, 25, 45;
    --sect-app-bg-rgb:          18, 5, 8;
    --sect-app-bg-2-rgb:        13, 3, 6;
    --sect-hdr-bg-rgb:          30, 12, 20;
    --sect-hdr-shadow-rgb:      80, 20, 40;
    --sect-chip-rgb:            74, 37, 48;
    --sect-chip-2-rgb:          58, 21, 32;
    --sect-chip-hover-rgb:      90, 48, 64;
    --sect-chip-hover-2-rgb:    74, 32, 48;
}

[data-sect="camarilla"] {
    --sect-key:     "camarilla";
    --sect-label:   "The Camarilla";
    --sect-deeper:  #0a3861;
    --sect-deep:    #0f4c81;
    --sect-light:   #1565a8;
    --sect-bright:  #2b8fd9;
    --sect-muted:   #1b3a55;
    --sect-wine:    #0e2337;

    --sect-deep-rgb:   15, 76, 129;
    --sect-light-rgb:  21, 101, 168;
    --sect-bright-rgb: 43, 143, 217;
    --sect-muted-rgb:  27, 58, 85;
    --sect-wine-rgb:   14, 35, 55;
    --sect-border-rgb: 80, 120, 160;

    --sect-glow:    rgba(43, 143, 217, 0.35);
    --sect-border:  rgba(80, 120, 160, 0.35);
    /* Pass-2 roles: near-palette brand shades that the six-colour sweep did not
       reach - page and panel grounds, the challenge chrome, the auth links. Each
       is the Sabbat literal rotated to this sect's hue at identical lightness and
       saturation, so only the colour moves and never the depth. */
    --sect-ground-rgb:          5, 11, 13;
    --sect-ground-deep-rgb:     3, 8, 10;
    --sect-bar-rgb:             8, 16, 20;
    --sect-bar-deep-rgb:        5, 11, 13;
    --sect-auth-bg-rgb:         10, 19, 26;
    --sect-auth-bg-2-rgb:       10, 21, 26;
    --sect-auth-panel-rgb:      15, 22, 25;
    --sect-link-rgb:            100, 143, 180;
    --sect-link-hover-rgb:      100, 154, 200;
    --sect-app-glow-1-rgb:      30, 72, 90;
    --sect-app-glow-2-rgb:      20, 49, 60;
    --sect-app-glow-3-rgb:      25, 64, 80;
    --sect-app-bg-rgb:          5, 13, 18;
    --sect-app-bg-2-rgb:        3, 10, 13;
    --sect-hdr-bg-rgb:          12, 25, 30;
    --sect-hdr-shadow-rgb:      20, 62, 80;
    --sect-chip-rgb:            37, 62, 74;
    --sect-chip-2-rgb:          21, 46, 58;
    --sect-chip-hover-rgb:      48, 78, 90;
    --sect-chip-hover-2-rgb:    32, 62, 74;
}

[data-sect="anarch"] {
    --sect-key:     "anarch";
    --sect-label:   "The Anarch Movement";
    --sect-deeper:  #10512f;
    --sect-deep:    #177245;
    --sect-light:   #1f9254;
    --sect-bright:  #2fa85c;
    --sect-muted:   #1d3d2c;
    --sect-wine:    #0f2419;

    --sect-deep-rgb:   23, 114, 69;
    --sect-light-rgb:  31, 146, 84;
    --sect-bright-rgb: 47, 168, 92;
    --sect-muted-rgb:  29, 61, 44;
    --sect-wine-rgb:   15, 36, 25;
    --sect-border-rgb: 90, 150, 110;

    --sect-glow:    rgba(47, 168, 92, 0.35);
    --sect-border:  rgba(90, 150, 110, 0.35);
    /* Pass-2 roles: near-palette brand shades that the six-colour sweep did not
       reach - page and panel grounds, the challenge chrome, the auth links. Each
       is the Sabbat literal rotated to this sect's hue at identical lightness and
       saturation, so only the colour moves and never the depth. */
    --sect-ground-rgb:          5, 13, 8;
    --sect-ground-deep-rgb:     3, 10, 6;
    --sect-bar-rgb:             8, 20, 12;
    --sect-bar-deep-rgb:        5, 13, 8;
    --sect-auth-bg-rgb:         10, 26, 18;
    --sect-auth-bg-2-rgb:       10, 26, 16;
    --sect-auth-panel-rgb:      15, 25, 18;
    --sect-link-rgb:            100, 180, 140;
    --sect-link-hover-rgb:      100, 200, 151;
    --sect-app-glow-1-rgb:      30, 90, 50;
    --sect-app-glow-2-rgb:      20, 60, 32;
    --sect-app-glow-3-rgb:      25, 80, 43;
    --sect-app-bg-rgb:          5, 18, 10;
    --sect-app-bg-2-rgb:        3, 13, 7;
    --sect-hdr-bg-rgb:          12, 30, 17;
    --sect-hdr-shadow-rgb:      20, 80, 40;
    --sect-chip-rgb:            37, 74, 50;
    --sect-chip-2-rgb:          21, 58, 34;
    --sect-chip-hover-rgb:      48, 90, 61;
    --sect-chip-hover-2-rgb:    32, 74, 45;
}

/* ---- re-point the site's existing palette at the active ramp -------------
   This is the block that does the work. Everything already written against
   these names inherits the sect without being edited. Loaded AFTER theme.css,
   landing.css and challenge-v2.css so these win.

   The three stylesheets each grew their own :root palette with slightly
   different names for the same colours, so all the spellings are covered here:
   theme.css uses the blood-red and accent families, landing.css uses --dark-red
   and --bright-red, and challenge-v2.css re-declares --accent-blood.

   --accent-red and --accent-red-dark are NOT in this list on purpose: in
   challenge-v2.css they paint .health-box.normal-damage and .dmg-btn, which
   are damage, not branding.                                                 */

:root {
    --accent-blood:      var(--sect-deep);
    --blood-red:         var(--sect-deep);
    --blood-red-light:   var(--sect-light);
    --blood-red-bright:  var(--sect-bright);
    --blood-red-deeper:  var(--sect-deeper);
    --dark-red:          var(--sect-deeper);
    --bright-red:        var(--sect-bright);
    --accent-burgundy:   var(--sect-muted);
    --accent-wine:       var(--sect-wine);
    --border-subtle:     var(--sect-border);
}

/* ---- helpers for anything new -------------------------------------------
   New markup should use these rather than a hex, so it themes for free.

   EVERY HELPER IS SCOPED UNDER [data-sect] ON PURPOSE. Several pages define
   their own button classes in an inline <style> block in <head>, which lands
   AFTER this external sheet in document order - so a bare `.sect-button`
   (0,1,0) loses to a page's `.logout-btn` (0,1,0) on source order alone.
   Prefixing with the attribute selector makes these (0,2,0) and they win
   without resorting to !important, which would be unoverridable later.       */

[data-sect] .sect-accent { color: var(--sect-bright); }
[data-sect] .sect-fill   { background: var(--sect-deep); }
[data-sect] .sect-border { border-color: var(--sect-border); }
[data-sect] .sect-glow   { box-shadow: 0 0 12px var(--sect-glow); }

/* Prints the sect's name from CSS alone, so a heading can say which chronicle
   this is without any JavaScript writing text into the DOM. */
.sect-label::after { content: var(--sect-label); }

/* The Chronicle button on the player dashboard, and anything else that should
   read as "this is the sect's thing". */
[data-sect] .sect-button {
    background: var(--sect-deep);
    border: 1px solid var(--sect-light);
    color: #fff;
}
[data-sect] .sect-button:hover { background: var(--sect-light); }

/* Until the sect resolves, avoid a flash of the wrong colour on a page whose
   accent is very visible. js/sect-theme.js removes this within a frame by
   stamping data-sect from its cached value. */
html:not([data-sect]) .sect-hide-until-ready { visibility: hidden; }

/* ===========================================================================
   Site-wide consistency (2026-10-01). sect-theme.css is the ONE stylesheet
   loaded on every page, so the canonical title font + back button live here.
   Fonts are sect-independent; the button uses the per-sect --sect-* vars, so it
   recolours automatically (red on Sabbat, blue on Camarilla, green on Anarch).
   =========================================================================== */

/* Pirata One is @font-face'd only in theme.css, which most pages do not load. */
@font-face {
    font-family: 'Pirata One';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/pirata-one-latin.woff2') format('woff2');
}

/* Every page title (<h1>) in the Desert of Shadows blackletter. */
h1 {
    font-family: 'Pirata One', 'Times New Roman', Georgia, serif !important;
}

/* One canonical back button, matching the site's gradient button language (login/save/nav
   are all gradient + rounded + shadow). Sect-aware via --sect-* so it recolours per sect.
   a.back-btn / button.back-btn out-specify the scattered per-page .back-btn rules. */
a.back-btn,
button.back-btn,
.back-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--sect-light, #a00000) 0%, var(--sect-deeper, #6b0000) 100%);
    color: #fff;
    text-decoration: none;
    border: none;
    padding: 0.55rem 1.4rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    line-height: 1.4;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
a.back-btn:hover,
button.back-btn:hover,
.back-btn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}