/* ===================================================================
   site-canvas.css — THE SITEWIDE BLACK CANVAS
   -------------------------------------------------------------------
   Reference: the results page (machined metal, #050608 base).
   This sheet pushes that treatment sitewide and one stop darker:

     base            #030406, falling to #010102 at the fold
     light           cool steel from the top-left, a whisper of brass
                     from the top-right — MATERIAL only, never text
     surfaces        machined metal: light top rim, black bottom rim,
                     one hairline edge, one deep shadow

   Every public page loads this through includes/header.php, so the
   canvas is identical from the landing page to the 404.

   LAW: no yellow colour fonts. Brass/gold appears only as material —
   borders, rules, washes — never as a text, link or label colour.
   =================================================================== */

:root {
    /* --- the canvas itself --- */
    --dv-canvas-color: #030406;
    --dv-canvas-deep:  #010102;
    --dv-canvas-bg:
        radial-gradient(1250px 740px at 4% -18%, rgba(150, 172, 205, .055), transparent 62%),
        radial-gradient(1020px 620px at 98% -12%, rgba(193, 154, 107, .040), transparent 58%),
        linear-gradient(180deg, #08090D 0%, #030406 38%, #010102 100%);

    /* --- machined metal surfaces --- */
    --dv-metal-face:   linear-gradient(155deg, rgba(21, 23, 28, .94), rgba(7, 8, 11, .86));
    --dv-metal-face-2: linear-gradient(155deg, rgba(13, 15, 19, .93), rgba(4, 5, 7, .86));
    --dv-metal-edge:   1px solid rgba(255, 255, 255, .075);
    --dv-metal-rim:    inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(0, 0, 0, .72);
    --dv-metal-shadow: 0 26px 64px -34px rgba(0, 0, 0, .95), 0 2px 6px -2px rgba(0, 0, 0, .60);

    /* --- brushed steel (the cool call to action) --- */
    --dv-steel-cta:   linear-gradient(180deg, #c9d5df 0%, #8fa3b6 100%);
    --dv-steel-cta-h: linear-gradient(180deg, #dce5ec 0%, #a2b5c6 100%);

    /* --- brass: material only (borders, rules, washes) --- */
    --dv-brass: #c19a6b;
}

/* --- the floor: the page never flashes a lighter colour --- */
html {
    background: var(--dv-canvas-deep) !important;
    color-scheme: dark;
}

body {
    min-height: 100vh;
    background: var(--dv-canvas-bg) !important;
    background-color: var(--dv-canvas-color) !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: #e9ebef;
}

/* ------------------------------------------------------------------
   Machined metal — the one surface style on the site
   ------------------------------------------------------------------ */
.dv-metal {
    background: var(--dv-metal-face);
    border: var(--dv-metal-edge);
    box-shadow: var(--dv-metal-rim), var(--dv-metal-shadow);
}

.dv-metal-flat {
    background: var(--dv-metal-face-2);
    border: var(--dv-metal-edge);
    box-shadow: var(--dv-metal-rim);
}

/* ------------------------------------------------------------------
   Brushed-steel call to action — dark text on steel, never a white slab
   ------------------------------------------------------------------ */
.dv-cta-steel {
    background: var(--dv-steel-cta) !important;
    color: #06070A !important;
    border-color: rgba(255, 255, 255, .26) !important;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .55) !important;
}

/* ------------------------------------------------------------------
   Hover states — a raised metal wash, never a white flash
   ------------------------------------------------------------------ */
.dv-hover-wash:hover {
    background-color: rgba(255, 255, 255, .09) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, .24) !important;
}

.dv-hover-brass:hover {
    background: linear-gradient(180deg, #d9b77c, #b98d52) !important;
    color: #0a0b0e !important;
    border-color: rgba(255, 255, 255, .22) !important;
}

.dv-hover-blue:hover {
    background: linear-gradient(180deg, #93c5fd, #60a5fa) !important;
    color: #05070c !important;
    border-color: rgba(255, 255, 255, .25) !important;
}

/* ------------------------------------------------------------------
   A switched-on chip: raised metal, not a light slab
   ------------------------------------------------------------------ */
.dv-pill-on {
    background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055)) !important;
    color: #f2f4f7 !important;
    border-color: rgba(255, 255, 255, .24) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 6px 18px -12px rgba(0, 0, 0, .9) !important;
}

/* ------------------------------------------------------------------
   SCRUB — no solid light slab survives on a public page.
   Safety net for any solid light utility that slips through the
   per-page edits. Specificity is kept low so brand hover states
   (brass, blue) still win on :hover.
   ------------------------------------------------------------------ */
a.bg-white,
button.bg-white {
    background: var(--dv-steel-cta);
    color: #06070A;
    border-color: rgba(255, 255, 255, .26);
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .55);
}

.hover\:bg-white:hover {
    background-color: rgba(255, 255, 255, .09);
    color: #fff;
    border-color: rgba(255, 255, 255, .24);
}

/* ------------------------------------------------------------------
   Legal pages share the same metal as the rest of the site
   ------------------------------------------------------------------ */
.legal-card {
    background: var(--dv-metal-face-2);
    border: var(--dv-metal-edge);
    box-shadow: var(--dv-metal-rim), var(--dv-metal-shadow);
}