/* HNX-478: Heirs Holdings reskin (opt-in, reversible).
   Active only when <html data-theme="hh">. Default (no attribute) keeps the current HeirsNexus theme,
   so the two templates are switchable at runtime with zero impact when off.
   Brand standards: font Mulish; HHRed #fe0000; HH Grey #53565a. Modelled on heirsholdings.com. */

html[data-brand="hh"] {
    /* primary brand red -> HHRed, with a darker shade for hovers/gradients */
    --red: #fe0000;
    --red2: #c40000;
    --hnx-red: #fe0000;
    --hnx-red-dark: #c40000;
    /* secondary accent -> HH Grey */
    --blue: #53565a;
    --hnx-blue: #53565a;
    /* text ink stays high-contrast; HH Grey drives muted/secondary chrome */
    --ink: #2b2d31;
    --hnx-ink: #2b2d31;
    --hh-grey: #53565a;
}

/* Mulish everywhere under the HH theme (falls back cleanly if the webfont is blocked). */
html[data-brand="hh"],
html[data-brand="hh"] body,
html[data-brand="hh"] button,
html[data-brand="hh"] input,
html[data-brand="hh"] select,
html[data-brand="hh"] textarea {
    font-family: 'Mulish', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* The runtime theme switch: a small, unobtrusive pill. Bottom-left so it never collides with the
   Nexus orb (bottom-right). Visible in both themes so you can always switch back. */
.hh-theme-toggle {
    position: fixed;
    left: 14px;
    bottom: 14px;
    z-index: 2147483000;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, .12);
    background: #ffffff;
    color: #53565a;
    font: 600 12px/1 'Inter', system-ui, sans-serif;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.hh-theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.hh-theme-toggle .hh-dot { width: 12px; height: 12px; border-radius: 50%; background: #fe0000; display: inline-block; }
html[data-brand="hh"] .hh-theme-toggle { font-family: 'Mulish', sans-serif; border-color: rgba(254, 0, 0, .28); }
@media print { .hh-theme-toggle { display: none !important; } }
@media (prefers-color-scheme: dark) {
    .hh-theme-toggle { background: #1b1e24; color: #e5e7eb; border-color: rgba(255, 255, 255, .14); }
}