/* Debugging — every variable is a unique saturated colour so unskinned elements are obvious.
   Faction colours are deliberately overridden here, unlike the convention in other skins.
   Monospace font reveals unskinned font regions; fully-opaque panels reveal surface colour. */
[data-skin="debugging"] {

    /* Accent ─ red → amber arc */
    --hbd-accent-1:              rgb(160, 255, 0);         /* #1  yellow-green */
    --hbd-accent-2:              rgb(255, 0, 0);           /* #2  pure red */
    --hbd-accent-3:              rgb(255, 64, 0);          /* #3  red-orange (explicit; derived would go dark) */

    /* Surface — each background colour is a different dark/vivid tone */
    --hbd-bg-rgb:           0 160 255;                     /* #8  sky blue  → panels */
    --hbd-bg-popover:       rgb(60, 0, 80);                /* #9  dark magenta → popovers */
    --hbd-bg-table-1:       rgb(0, 80, 35);                /* #10 vivid dark green → even rows */
    --hbd-bg-table-2:       rgb(80, 0, 35);                /* #11 vivid dark rose → odd rows */
    --hbd-bg-input:         rgb(255, 255, 0);              /* #22 vivid yellow */

    /* Text — contrasting neons spaced across the spectrum */
    --hbd-text:             rgb(255, 0, 255);              /* #15 magenta */
    --hbd-text-subtle:      rgb(0, 255, 60);               /* #17 lime green */
    --hbd-text-input:       rgb(255, 0, 80);               /* #21 hot rose */

    /* Interactive — vivid and maximally distinct from each other */
    --hbd-btn-neutral:          rgb(255, 30, 0);           /* #27 vermillion */
    --hbd-btn-neutral-hover:    rgb(0, 200, 255);          /* #28 sky blue */
    --hbd-btn-neutral-disabled: rgb(60, 0, 200);           /* #29 deep blue */

    --hbd-btn-alert:            rgb(200, 0, 200);          /* #38 magenta */
    --hbd-btn-ok:               rgb(0, 180, 0);            /* #39 pure green */
    --hbd-btn-alternate:        rgb(0, 0, 200);            /* #40 pure blue */

    --hbd-link:             rgb(0, 120, 255);              /* #30 azure */

    /* Border */
    --hbd-border-rgb:     255 60 255;                     /* #31 fuchsia */
    --hbd-border-opacity: 0.90;                           /* #32 */
    --hbd-divider:        rgb(255, 230, 0);               /* #33 vivid yellow */

    /* State */
    --hbd-valid:            rgb(0, 255, 100);              /* #34 neon green */
    --hbd-invalid:          rgb(255, 0, 60);               /* #35 neon red */

    /* Animation */
    --hbd-flash-1:          rgb(255, 255, 0);              /* #36 pure yellow */
    --hbd-flash-2:          rgb(0, 0, 255);                /* #37 pure blue */

    /* Faction — each group gets its own clearly labelled hue band */
    --hbd-dragon:     rgb(190, 120, 255);   /* #41 lavender */
    --hbd-town:       rgb(255, 140, 40);    /* #47 vivid orange */
    --hbd-individual: rgb(40, 180, 255);    /* #51 bright teal */
    --hbd-unknown:    rgb(0, 230, 180);     /* #54 bright cyan-green */

    /* Fonts — monospace makes unskinned font regions immediately obvious */
    --hbd-font-display:  "Courier New", monospace;
    --hbd-font-body:     "Courier New", monospace;
    --hbd-font-ui:       "Courier New", monospace;

    /* Full opacity so panel surface colour is unambiguous (no bg bleed-through) */
    --hbd-card-opacity:     1.0;
    --hbd-modal-opacity:    1.0;

    /* Diagonal stripe texture — makes texture-capable panels immediately visible */
    --hbd-panel-texture:
        repeating-linear-gradient(
            45deg,
            rgba(255, 0, 255, 0.18) 0px,
            rgba(255, 0, 255, 0.18) 3px,
            transparent 3px,
            transparent 10px
        );
    --hbd-panel-blend-mode: normal;
}