/* Hazmat — warning-tape yellow on charcoal, stencil type. Overrides the :root variables in Styling/app.css.
   Plain CSS (not run through Tailwind): a skin only ever sets variables. */
[data-skin="hazmat"] {
    /* Accent — hazard yellow */
    --inf-accent-1:              rgb(250, 204, 21);
    --inf-accent-2:              rgb(253, 224, 71);

    /* Surface — charcoal */
    --inf-bg-rgb:           24 22 18;
    --inf-bg-page:          #0e0d0b;
    --inf-bg-popover:       #14120f;
    --inf-bg-table-1:       #1a1814;
    --inf-bg-table-2:       #221f1a;
    --inf-bg-input:         rgb(250, 247, 235);

    /* Text */
    --inf-text:             #ece6d6;
    --inf-text-subtle:      rgb(150, 140, 115);
    --inf-text-input:       rgb(28, 25, 20);

    /* Interactive */
    --inf-btn-neutral:      #3a352b;
    --inf-btn-alert:        #a3311b;
    --inf-btn-ok:           #a17a06;
    --inf-btn-alternate:    #3b4a5c;
    --inf-btn-text:         #fffbeb;

    --inf-link:             rgb(253, 224, 71);

    /* Borders */
    --inf-border-rgb:       250 204 21;
    --inf-border-opacity:   0.5;
    --inf-divider:          rgb(250 204 21 / 0.18);

    /* Signals — keep infected/survivor distinct from the yellow accent */
    --inf-infected:  rgb(163, 230, 53);
    --inf-host:      rgb(251, 146, 60);

    /* Fonts */
    --inf-font-display:  "Black Ops One", system-ui;

    /* Backdrop — faint diagonal warning tape */
    --inf-page-backdrop:
        repeating-linear-gradient(-45deg, rgb(250 204 21 / 0.035) 0 28px, transparent 28px 56px),
        radial-gradient(ellipse 80% 50% at 50% 0%, rgb(250 204 21 / 0.10), transparent 70%);

    --inf-card-opacity:     0.88;
}