/* ============================================================
   Instaspar — HEMA Fencing Theme System
   Seven palettes, all sharing the same muted desaturated
   aesthetic as the original Forest & Steel design.

   Themes: forest (default), velvet, garnet, obsidian,
           cobalt, amber, leather

   All rules use --t-* custom properties so that swapping
   html[data-color-theme] instantly repaints the whole UI.
   ============================================================ */

/* ── Forest & Steel (default) ──────────────────────────────── */
/*
   Ash Grey      #CAD2C5  HSL( 97°, 12%, 80%)
   Muted Teal    #84A98C  HSL(132°, 17%, 59%)
   Deep Teal     #52796F  HSL(165°, 19%, 40%)
   Dark Slate    #354F52  HSL(186°, 21%, 26%)
   Charcoal Blue #2F3E46  HSL(201°, 20%, 23%)
*/
:root {
  /* ── Structural palette ── */
  --t-light:        #CAD2C5;
  --t-mid:          #84A98C;
  --t-deep:         #52796F;
  --t-deep-dim:     #437165;
  --t-dark:         #354F52;
  --t-dark-dim:     #2b4144;
  --t-charcoal:     #2F3E46;

  /* ── HSL components for computed expressions ── */
  --t-primary-h:    165deg;
  --t-primary-s:    19%;
  --t-primary-l:    40%;
  --t-info-h:       186deg;
  --t-info-s:       21%;
  --t-info-l:       26%;

  /* ── Page background & border tints ── */
  --t-scheme-h:     186deg;
  --t-scheme-s:     8%;
  --t-border-h:     97deg;
  --t-border-s:     10%;

  /* ── Body text ── */
  --t-text-h:       201deg;
  --t-text-s:       20%;
  --t-text-l:       23%;

  /* ── Semantic — fixed across all themes ── */
  --t-danger:       #944C4C;
  --t-danger-dim:   #7e3e3e;
  --t-danger-h:     0deg;
  --t-danger-s:     32%;
  --t-warning:      #9E8447;
  --t-warning-dim:  #87703a;
  --t-warning-h:    42deg;
  --t-warning-s:    38%;

  /* ── Button pulse animation colors ── */
  --t-pulse-start:  rgba(82, 121, 111, 0.7);
  --t-pulse-end:    rgba(82, 121, 111, 0);

  /* ── Focus ring shadow ── */
  --t-focus-ring:   hsl(165deg 19% 40% / 0.2);

  /* ── Bulma CSS variable overrides ── */
  --bulma-primary-h: 165deg;
  --bulma-primary-s: 19%;
  --bulma-primary-l: 40%;
  --bulma-link-h:    132deg;
  --bulma-link-s:    17%;
  --bulma-link-l:    38%;
  --bulma-success-h: 132deg;
  --bulma-success-s: 17%;
  --bulma-success-l: 38%;
  --bulma-info-h:    186deg;
  --bulma-info-s:    21%;
  --bulma-info-l:    26%;
  --bulma-warning-h: 42deg;
  --bulma-warning-s: 38%;
  --bulma-warning-l: 45%;
  --bulma-danger-h:  0deg;
  --bulma-danger-s:  32%;
  --bulma-danger-l:  44%;
  --bulma-dark-h:    201deg;
  --bulma-dark-s:    20%;
  --bulma-dark-l:    23%;
  --bulma-light-h:   97deg;
  --bulma-light-s:   12%;
  --bulma-light-l:   80%;
  --bulma-scheme-h:           186deg;
  --bulma-scheme-s:           8%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           97deg;
  --bulma-border-s:           10%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             201deg;
  --bulma-text-s:             20%;
  --bulma-text-l:             23%;
  --bulma-text-strong-h:      201deg;
  --bulma-text-strong-s:      20%;
  --bulma-text-strong-l:      18%;
}

/* ── Velvet (Purple) ────────────────────────────────────────── */
/*
   Plum Ash      #C9C5D2  HSL(252°, 12%, 80%)
   Muted Plum    #8E88A3  HSL(262°, 15%, 60%)
   Deep Plum     #675A7B  HSL(272°, 18%, 42%)
   Dark Violet   #49415A  HSL(280°, 16%, 28%)
   Charcoal Ink  #3B3347  HSL(285°, 15%, 22%)
*/
html[data-color-theme="velvet"] {
  --t-light:        #C9C5D2;
  --t-mid:          #8E88A3;
  --t-deep:         #675A7B;
  --t-deep-dim:     #5B4F6D;
  --t-dark:         #49415A;
  --t-dark-dim:     #3E384D;
  --t-charcoal:     #3B3347;

  --t-primary-h:    272deg;
  --t-primary-s:    18%;
  --t-primary-l:    42%;
  --t-info-h:       280deg;
  --t-info-s:       16%;
  --t-info-l:       28%;

  --t-scheme-h:     280deg;
  --t-scheme-s:     8%;
  --t-border-h:     252deg;
  --t-border-s:     10%;

  --t-text-h:       285deg;
  --t-text-s:       15%;
  --t-text-l:       22%;

  --t-pulse-start:  rgba(103, 90, 123, 0.7);
  --t-pulse-end:    rgba(103, 90, 123, 0);
  --t-focus-ring:   hsl(272deg 18% 42% / 0.2);

  --bulma-primary-h: 272deg;
  --bulma-primary-s: 18%;
  --bulma-primary-l: 42%;
  --bulma-link-h:    262deg;
  --bulma-link-s:    15%;
  --bulma-link-l:    38%;
  --bulma-success-h: 262deg;
  --bulma-success-s: 15%;
  --bulma-success-l: 38%;
  --bulma-info-h:    280deg;
  --bulma-info-s:    16%;
  --bulma-info-l:    28%;
  --bulma-dark-h:    285deg;
  --bulma-dark-s:    15%;
  --bulma-dark-l:    22%;
  --bulma-light-h:   252deg;
  --bulma-light-s:   12%;
  --bulma-light-l:   80%;
  --bulma-scheme-h:           280deg;
  --bulma-scheme-s:           8%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           252deg;
  --bulma-border-s:           10%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             285deg;
  --bulma-text-s:             15%;
  --bulma-text-l:             22%;
  --bulma-text-strong-h:      285deg;
  --bulma-text-strong-s:      15%;
  --bulma-text-strong-l:      17%;
}

/* ── Garnet (Red) ───────────────────────────────────────────── */
/*
   Rose Ash       #D2C5C7  HSL(350°, 12%, 80%)
   Muted Rose     #A88C8E  HSL(355°, 14%, 58%)
   Deep Garnet    #785356  HSL(358°, 18%, 40%)
   Dark Burgundy  #503B3C  HSL(  4°, 16%, 27%)
   Charcoal Ember #3F3130  HSL(  8°, 14%, 21%)

   --t-danger (#944C4C, S=32%) is intentionally more saturated
   than --t-deep (#785356, S=18%) so danger still reads as alert.
*/
html[data-color-theme="garnet"] {
  --t-light:        #D2C5C7;
  --t-mid:          #A88C8E;
  --t-deep:         #785356;
  --t-deep-dim:     #6A494B;
  --t-dark:         #503B3C;
  --t-dark-dim:     #443234;
  --t-charcoal:     #3F3130;

  --t-primary-h:    358deg;
  --t-primary-s:    18%;
  --t-primary-l:    40%;
  --t-info-h:       4deg;
  --t-info-s:       16%;
  --t-info-l:       27%;

  --t-scheme-h:     4deg;
  --t-scheme-s:     8%;
  --t-border-h:     350deg;
  --t-border-s:     10%;

  --t-text-h:       8deg;
  --t-text-s:       14%;
  --t-text-l:       21%;

  --t-pulse-start:  rgba(120, 83, 86, 0.7);
  --t-pulse-end:    rgba(120, 83, 86, 0);
  --t-focus-ring:   hsl(358deg 18% 40% / 0.2);

  --bulma-primary-h: 358deg;
  --bulma-primary-s: 18%;
  --bulma-primary-l: 40%;
  --bulma-link-h:    355deg;
  --bulma-link-s:    14%;
  --bulma-link-l:    36%;
  --bulma-success-h: 355deg;
  --bulma-success-s: 14%;
  --bulma-success-l: 36%;
  --bulma-info-h:    4deg;
  --bulma-info-s:    16%;
  --bulma-info-l:    27%;
  --bulma-dark-h:    8deg;
  --bulma-dark-s:    14%;
  --bulma-dark-l:    21%;
  --bulma-light-h:   350deg;
  --bulma-light-s:   12%;
  --bulma-light-l:   80%;
  --bulma-scheme-h:           4deg;
  --bulma-scheme-s:           8%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           350deg;
  --bulma-border-s:           10%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             8deg;
  --bulma-text-s:             14%;
  --bulma-text-l:             21%;
  --bulma-text-strong-h:      8deg;
  --bulma-text-strong-s:      14%;
  --bulma-text-strong-l:      16%;
}

/* ── Obsidian (Near-Black) ──────────────────────────────────── */
/*
   Silver Mist  #CDD0D2  HSL(210°,  5%, 82%)
   Steel Grey   #8D9296  HSL(210°,  6%, 58%)
   Deep Slate   #5A6168  HSL(210°,  8%, 38%)
   Dark Iron    #3A4046  HSL(210°,  9%, 25%)
   Obsidian     #2A3036  HSL(210°, 10%, 18%)
*/
html[data-color-theme="obsidian"] {
  --t-light:        #CDD0D2;
  --t-mid:          #8D9296;
  --t-deep:         #5A6168;
  --t-deep-dim:     #4E555B;
  --t-dark:         #3A4046;
  --t-dark-dim:     #31373C;
  --t-charcoal:     #2A3036;

  --t-primary-h:    210deg;
  --t-primary-s:    8%;
  --t-primary-l:    38%;
  --t-info-h:       210deg;
  --t-info-s:       9%;
  --t-info-l:       25%;

  --t-scheme-h:     210deg;
  --t-scheme-s:     5%;
  --t-border-h:     210deg;
  --t-border-s:     6%;

  --t-text-h:       210deg;
  --t-text-s:       10%;
  --t-text-l:       18%;

  --t-pulse-start:  rgba(90, 97, 104, 0.7);
  --t-pulse-end:    rgba(90, 97, 104, 0);
  --t-focus-ring:   hsl(210deg 8% 38% / 0.2);

  --bulma-primary-h: 210deg;
  --bulma-primary-s: 8%;
  --bulma-primary-l: 38%;
  --bulma-link-h:    210deg;
  --bulma-link-s:    8%;
  --bulma-link-l:    34%;
  --bulma-success-h: 210deg;
  --bulma-success-s: 8%;
  --bulma-success-l: 34%;
  --bulma-info-h:    210deg;
  --bulma-info-s:    9%;
  --bulma-info-l:    25%;
  --bulma-dark-h:    210deg;
  --bulma-dark-s:    10%;
  --bulma-dark-l:    18%;
  --bulma-light-h:   210deg;
  --bulma-light-s:   5%;
  --bulma-light-l:   82%;
  --bulma-scheme-h:           210deg;
  --bulma-scheme-s:           5%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           210deg;
  --bulma-border-s:           6%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             210deg;
  --bulma-text-s:             10%;
  --bulma-text-l:             18%;
  --bulma-text-strong-h:      210deg;
  --bulma-text-strong-s:      10%;
  --bulma-text-strong-l:      13%;
}

/* ── Cobalt (Navy Blue) ─────────────────────────────────────── */
/*
   Blue Ash       #BEC8CE  HSL(200°, 14%, 80%)
   Steel Blue     #798EA1  HSL(208°, 18%, 57%)
   Cobalt         #495F72  HSL(212°, 22%, 38%)
   Deep Navy      #314051  HSL(218°, 22%, 25%)
   Midnight Blue  #2C3347  HSL(222°, 20%, 20%)
*/
html[data-color-theme="cobalt"] {
  --t-light:        #BEC8CE;
  --t-mid:          #798EA1;
  --t-deep:         #495F72;
  --t-deep-dim:     #3F5263;
  --t-dark:         #314051;
  --t-dark-dim:     #293544;
  --t-charcoal:     #2C3347;

  --t-primary-h:    212deg;
  --t-primary-s:    22%;
  --t-primary-l:    38%;
  --t-info-h:       218deg;
  --t-info-s:       22%;
  --t-info-l:       25%;

  --t-scheme-h:     218deg;
  --t-scheme-s:     8%;
  --t-border-h:     200deg;
  --t-border-s:     10%;

  --t-text-h:       222deg;
  --t-text-s:       20%;
  --t-text-l:       20%;

  --t-pulse-start:  rgba(73, 95, 114, 0.7);
  --t-pulse-end:    rgba(73, 95, 114, 0);
  --t-focus-ring:   hsl(212deg 22% 38% / 0.2);

  --bulma-primary-h: 212deg;
  --bulma-primary-s: 22%;
  --bulma-primary-l: 38%;
  --bulma-link-h:    208deg;
  --bulma-link-s:    18%;
  --bulma-link-l:    34%;
  --bulma-success-h: 208deg;
  --bulma-success-s: 18%;
  --bulma-success-l: 34%;
  --bulma-info-h:    218deg;
  --bulma-info-s:    22%;
  --bulma-info-l:    25%;
  --bulma-dark-h:    222deg;
  --bulma-dark-s:    20%;
  --bulma-dark-l:    20%;
  --bulma-light-h:   200deg;
  --bulma-light-s:   14%;
  --bulma-light-l:   80%;
  --bulma-scheme-h:           218deg;
  --bulma-scheme-s:           8%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           200deg;
  --bulma-border-s:           10%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             222deg;
  --bulma-text-s:             20%;
  --bulma-text-l:             20%;
  --bulma-text-strong-h:      222deg;
  --bulma-text-strong-s:      20%;
  --bulma-text-strong-l:      15%;
}

/* ── Amber (Gold/Yellow) ────────────────────────────────────── */
/*
   Warm Cream    #D9CEBC  HSL( 44°, 18%, 82%)
   Muted Ochre   #A8977F  HSL( 40°, 18%, 57%)
   Amber         #7A6C48  HSL( 44°, 22%, 40%)
   Dark Olive    #524434  HSL( 36°, 20%, 27%)
   Warm Charcoal #3D3126  HSL( 30°, 18%, 20%)

   --t-warning (#9E8447, S=38%) is more saturated than
   --t-deep (#7A6C48, S=22%), preserving its caution signal.
*/
html[data-color-theme="amber"] {
  --t-light:        #D9CEBC;
  --t-mid:          #A8977F;
  --t-deep:         #7A6C48;
  --t-deep-dim:     #6B5E3E;
  --t-dark:         #524434;
  --t-dark-dim:     #46392B;
  --t-charcoal:     #3D3126;

  --t-primary-h:    44deg;
  --t-primary-s:    22%;
  --t-primary-l:    40%;
  --t-info-h:       36deg;
  --t-info-s:       20%;
  --t-info-l:       27%;

  --t-scheme-h:     36deg;
  --t-scheme-s:     8%;
  --t-border-h:     44deg;
  --t-border-s:     10%;

  --t-text-h:       30deg;
  --t-text-s:       18%;
  --t-text-l:       20%;

  --t-pulse-start:  rgba(122, 108, 72, 0.7);
  --t-pulse-end:    rgba(122, 108, 72, 0);
  --t-focus-ring:   hsl(44deg 22% 40% / 0.2);

  --bulma-primary-h: 44deg;
  --bulma-primary-s: 22%;
  --bulma-primary-l: 40%;
  --bulma-link-h:    40deg;
  --bulma-link-s:    18%;
  --bulma-link-l:    34%;
  --bulma-success-h: 40deg;
  --bulma-success-s: 18%;
  --bulma-success-l: 34%;
  --bulma-info-h:    36deg;
  --bulma-info-s:    20%;
  --bulma-info-l:    27%;
  --bulma-dark-h:    30deg;
  --bulma-dark-s:    18%;
  --bulma-dark-l:    20%;
  --bulma-light-h:   44deg;
  --bulma-light-s:   18%;
  --bulma-light-l:   82%;
  --bulma-scheme-h:           36deg;
  --bulma-scheme-s:           8%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           44deg;
  --bulma-border-s:           10%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             30deg;
  --bulma-text-s:             18%;
  --bulma-text-l:             20%;
  --bulma-text-strong-h:      30deg;
  --bulma-text-strong-s:      18%;
  --bulma-text-strong-l:      15%;
}

/* ── Leather (Brown) ────────────────────────────────────────── */
/*
   Parchment     #D5C8BA  HSL( 32°, 16%, 80%)
   Muted Tan     #A68E7A  HSL( 28°, 16%, 57%)
   Saddle Brown  #73573F  HSL( 30°, 20%, 38%)
   Dark Walnut   #4E3C2E  HSL( 22°, 18%, 26%)
   Espresso      #3D2E26  HSL( 18°, 16%, 20%)
*/
html[data-color-theme="leather"] {
  --t-light:        #D5C8BA;
  --t-mid:          #A68E7A;
  --t-deep:         #73573F;
  --t-deep-dim:     #644B37;
  --t-dark:         #4E3C2E;
  --t-dark-dim:     #433326;
  --t-charcoal:     #3D2E26;

  --t-primary-h:    30deg;
  --t-primary-s:    20%;
  --t-primary-l:    38%;
  --t-info-h:       22deg;
  --t-info-s:       18%;
  --t-info-l:       26%;

  --t-scheme-h:     22deg;
  --t-scheme-s:     8%;
  --t-border-h:     32deg;
  --t-border-s:     10%;

  --t-text-h:       18deg;
  --t-text-s:       16%;
  --t-text-l:       20%;

  --t-pulse-start:  rgba(115, 87, 63, 0.7);
  --t-pulse-end:    rgba(115, 87, 63, 0);
  --t-focus-ring:   hsl(30deg 20% 38% / 0.2);

  --bulma-primary-h: 30deg;
  --bulma-primary-s: 20%;
  --bulma-primary-l: 38%;
  --bulma-link-h:    28deg;
  --bulma-link-s:    16%;
  --bulma-link-l:    34%;
  --bulma-success-h: 28deg;
  --bulma-success-s: 16%;
  --bulma-success-l: 34%;
  --bulma-info-h:    22deg;
  --bulma-info-s:    18%;
  --bulma-info-l:    26%;
  --bulma-dark-h:    18deg;
  --bulma-dark-s:    16%;
  --bulma-dark-l:    20%;
  --bulma-light-h:   32deg;
  --bulma-light-s:   16%;
  --bulma-light-l:   80%;
  --bulma-scheme-h:           22deg;
  --bulma-scheme-s:           8%;
  --bulma-scheme-main-l:      97%;
  --bulma-scheme-main-bis-l:  94%;
  --bulma-scheme-main-ter-l:  90%;
  --bulma-border-h:           32deg;
  --bulma-border-s:           10%;
  --bulma-border-l:           70%;
  --bulma-border-weak-l:      84%;
  --bulma-text-h:             18deg;
  --bulma-text-s:             16%;
  --bulma-text-l:             20%;
  --bulma-text-strong-h:      18deg;
  --bulma-text-strong-s:      16%;
  --bulma-text-strong-l:      15%;
}

/* ============================================================
   Component rules — all use --t-* tokens, so every theme
   above automatically repaints the full UI.
   ============================================================ */

/* ── Navbar ── */
.navbar {
  background-color: var(--t-charcoal);
  border-bottom: 2px solid var(--t-dark);
}

.navbar-brand .navbar-item,
.navbar-menu .navbar-item {
  color: var(--t-light);
}

.navbar-item:hover,
.navbar-item:focus,
.navbar-item.is-active {
  background-color: var(--t-dark) !important;
  color: var(--t-light) !important;
}

.navbar-burger span {
  background-color: var(--t-light);
}

.navbar-menu {
  background-color: var(--t-charcoal);
}

/* ── Buttons ── */
.button.is-primary {
  background-color: var(--t-deep);
  border-color: transparent;
  color: var(--t-light);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.button.is-primary:hover {
  background-color: var(--t-deep-dim);
  color: #ffffff;
}

.button.is-dark {
  background-color: var(--t-charcoal);
  color: var(--t-light);
}

.button.is-dark:hover {
  background-color: var(--t-dark);
  color: #ffffff;
}

.button.is-light {
  background-color: var(--t-light);
  color: var(--t-charcoal);
}

.button.is-light:hover {
  background-color: hsl(var(--t-border-h), var(--t-border-s), 72%);
  color: var(--t-charcoal);
}

/* ── Info — dark slate tone ── */
.button.is-info {
  background-color: var(--t-dark);
  border-color: transparent;
  color: var(--t-light);
  font-weight: 500;
}

.button.is-info:hover {
  background-color: var(--t-dark-dim);
  color: #ffffff;
}

.button.is-info.is-light {
  background-color: hsl(var(--t-info-h), var(--t-info-s), 92%);
  color: var(--t-dark);
}

.tag.is-info {
  background-color: var(--t-dark);
  color: var(--t-light);
}

.tag.is-info.is-light {
  background-color: hsl(var(--t-info-h), var(--t-info-s), 92%);
  color: var(--t-dark);
}

.notification.is-info {
  background-color: hsl(var(--t-info-h), var(--t-info-s), 92%);
  border-left: 4px solid var(--t-dark);
  color: var(--t-charcoal);
}

.message.is-info .message-header {
  background-color: var(--t-dark);
  color: var(--t-light);
}

.message.is-info .message-body {
  border-color: var(--t-dark);
  color: var(--t-dark);
}

.has-text-info { color: var(--t-dark) !important; }

/* ── Danger — Muted Brick Red (fixed across themes) ── */
.button.is-danger {
  background-color: var(--t-danger);
  border-color: transparent;
  color: #f0e8e8;
  font-weight: 500;
}

.button.is-danger:hover {
  background-color: var(--t-danger-dim);
  color: #ffffff;
}

.button.is-danger.is-light {
  background-color: hsl(var(--t-danger-h), var(--t-danger-s), 92%);
  color: var(--t-danger-dim);
}

.tag.is-danger {
  background-color: var(--t-danger);
  color: #f0e8e8;
}

.tag.is-danger.is-light {
  background-color: hsl(var(--t-danger-h), var(--t-danger-s), 92%);
  color: var(--t-danger-dim);
}

.notification.is-danger {
  background-color: hsl(var(--t-danger-h), var(--t-danger-s), 92%);
  border-left: 4px solid var(--t-danger);
  color: var(--t-charcoal);
}

.message.is-danger .message-header {
  background-color: var(--t-danger);
  color: #f0e8e8;
}

.message.is-danger .message-body {
  border-color: var(--t-danger);
  color: var(--t-danger-dim);
}

.has-text-danger { color: var(--t-danger) !important; }

/* ── Warning — Muted Gold (fixed across themes) ── */
.button.is-warning {
  background-color: var(--t-warning);
  border-color: transparent;
  color: #f5f0e4;
  font-weight: 500;
}

.button.is-warning:hover {
  background-color: var(--t-warning-dim);
  color: #ffffff;
}

.button.is-warning.is-light {
  background-color: hsl(var(--t-warning-h), var(--t-warning-s), 92%);
  color: hsl(var(--t-warning-h), var(--t-warning-s), 28%);
}

.tag.is-warning {
  background-color: var(--t-warning);
  color: #f5f0e4;
}

.tag.is-warning.is-light {
  background-color: hsl(var(--t-warning-h), var(--t-warning-s), 92%);
  color: hsl(var(--t-warning-h), var(--t-warning-s), 28%);
}

.notification.is-warning {
  background-color: hsl(var(--t-warning-h), var(--t-warning-s), 92%);
  border-left: 4px solid var(--t-warning);
  color: var(--t-charcoal);
}

.message.is-warning .message-header {
  background-color: var(--t-warning);
  color: #f5f0e4;
}

.message.is-warning .message-body {
  border-color: var(--t-warning);
  color: hsl(var(--t-warning-h), var(--t-warning-s), 28%);
}

.has-text-warning { color: var(--t-warning) !important; }

/* ── Forest / themed secondary button ── */
.button.is-forest {
  background-color: var(--t-dark);
  border-color: transparent;
  color: var(--t-light);
  font-weight: 500;
}

.button.is-forest:hover {
  background-color: var(--t-dark-dim);
  color: #ffffff;
}

/* ── Cards & Boxes ── */
.card {
  border: 1px solid hsl(var(--t-border-h), var(--t-border-s), 78%);
  box-shadow: 0 1px 4px hsl(var(--t-scheme-h), var(--t-scheme-s), 82%);
}

.card-header {
  background-color: hsl(var(--t-scheme-h), var(--t-scheme-s), 94%);
  border-bottom: 1px solid hsl(var(--t-border-h), var(--t-border-s), 78%);
  box-shadow: none;
}

.card-header-title {
  color: var(--t-dark);
  font-weight: 600;
}

/* ── Tags & Badges ── */
.tag.is-primary {
  background-color: var(--t-deep);
  color: var(--t-light);
}

.tag.is-dark {
  background-color: var(--t-charcoal);
  color: var(--t-light);
}

.tag.is-success {
  background-color: var(--t-deep);
  color: var(--t-light);
}

.tag.is-success.is-light {
  background-color: hsl(var(--t-primary-h), var(--t-primary-s), 92%);
  color: var(--t-dark);
}

.tag.is-light {
  background-color: var(--t-light);
  color: var(--t-dark);
}

/* ── Table ── */
.table th {
  color: var(--t-dark);
  background-color: hsl(var(--t-scheme-h), var(--t-scheme-s), 94%);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.table td {
  color: var(--t-charcoal);
  border-color: hsl(var(--t-border-h), var(--t-border-s), 84%);
}

.table tr:hover td {
  background-color: hsl(var(--t-primary-h), 10%, 95%);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: hsl(var(--t-scheme-h), var(--t-scheme-s), 96%);
}

/* ── Form elements ── */
.input,
.textarea,
.select select {
  border-color: hsl(var(--t-border-h), var(--t-border-s), 72%);
  color: var(--t-charcoal);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--t-deep);
  box-shadow: 0 0 0 0.125em var(--t-focus-ring);
}

.label {
  color: var(--t-dark);
  font-weight: 600;
}

/* ── Notification & Message ── */
.notification.is-primary {
  background-color: hsl(var(--t-primary-h), var(--t-primary-s), 92%);
  border-left: 4px solid var(--t-deep);
  color: var(--t-charcoal);
}

.message.is-primary .message-header {
  background-color: var(--t-deep);
}

.message.is-primary .message-body {
  border-color: var(--t-deep);
  color: var(--t-dark);
}

/* ── Menu (sidebar nav) ── */
.menu-label {
  color: var(--t-mid);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
}

.menu-list a {
  color: var(--t-dark);
}

.menu-list a:hover {
  background-color: hsl(var(--t-primary-h), 10%, 93%);
  color: var(--t-deep);
}

.menu-list a.is-active {
  background-color: var(--t-deep);
  color: var(--t-light);
}

/* ── Hero ── */
.hero.is-primary {
  background-color: var(--t-deep);
}

.hero.is-dark {
  background-color: var(--t-charcoal);
}

.hero.is-primary .title,
.hero.is-dark .title {
  color: var(--t-light);
}

.hero.is-primary .subtitle,
.hero.is-dark .subtitle {
  color: hsl(var(--t-border-h), 12%, 75%);
}

/* ── Panel ── */
.panel {
  border-radius: 6px;
  border: 1px solid hsl(var(--t-border-h), var(--t-border-s), 76%);
  box-shadow: none;
}

.panel-heading {
  background-color: var(--t-dark);
  color: var(--t-light);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.panel-block.is-active,
.panel-block:hover {
  border-left-color: var(--t-deep);
  color: var(--t-deep);
}

/* ── Progress bars ── */
.progress.is-primary::-webkit-progress-value {
  background-color: var(--t-deep);
}

.progress.is-primary::-moz-progress-bar {
  background-color: var(--t-deep);
}

/* ── Tabs ── */
.tabs a {
  color: var(--t-deep);
  border-bottom-color: hsl(var(--t-border-h), var(--t-border-s), 78%);
}

.tabs a:hover {
  border-bottom-color: var(--t-deep);
  color: var(--t-dark);
}

.tabs li.is-active a {
  border-bottom-color: var(--t-deep);
  color: var(--t-deep);
  font-weight: 600;
}

.tabs.is-boxed li.is-active a {
  background-color: hsl(var(--t-primary-h), var(--t-primary-s), 96%);
  border-color: hsl(var(--t-border-h), var(--t-border-s), 78%);
  border-bottom-color: transparent;
}

/* ── Start Session Button — pulsing glow ── */
@keyframes start-pulse {
  0%   { box-shadow: 0 0 0 0 var(--t-pulse-start); }
  70%  { box-shadow: 0 0 0 14px var(--t-pulse-end); }
  100% { box-shadow: 0 0 0 0 var(--t-pulse-end); }
}

.button.btn-start-session {
  animation: start-pulse 2s ease-out infinite;
  font-size: 1.32rem;
  height: auto;
  padding: 0.7em 2.2em;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.button.btn-start-session:disabled {
  animation: none;
}

/* ── Footer ── */
.footer {
  background-color: var(--t-charcoal);
  color: var(--t-mid);
  padding: 2rem;
}

.footer a {
  color: var(--t-mid);
}

.footer a:hover {
  color: var(--t-light);
}

/* ── Typography helpers ── */
.has-text-primary { color: var(--t-deep)     !important; }
.has-text-link    { color: var(--t-deep)     !important; }
.has-text-success { color: var(--t-deep)     !important; }
.has-text-dark    { color: var(--t-charcoal) !important; }
.has-text-muted   { color: var(--t-mid)      !important; }
.has-text-ash     { color: var(--t-light)    !important; }

.has-background-primary       { background-color: var(--t-deep)     !important; }
.has-background-primary-light { background-color: hsl(var(--t-primary-h), var(--t-primary-s), 90%) !important; color: var(--t-charcoal) !important; }
.has-background-dark          { background-color: var(--t-charcoal) !important; }
.has-background-light         { background-color: var(--t-light)    !important; }
.has-background-slate         { background-color: var(--t-dark)     !important; }

/* ── Box & drag handle (themed) ── */
.box {
  border: 1px solid hsl(var(--t-border-h), var(--t-border-s), 78%);
}

.drag-handle {
  color: var(--t-mid);
}

/* ── Participant remove-mode shake ── */
@keyframes remove-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-2px); }
  40%      { transform: translateX(2px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

#participants_list .button.is-light.is-danger {
  animation: remove-shake 0.4s ease;
}