/* KeyVault · black & white base theme.
   Only the chrome is monochrome: page, surfaces, text, lines, primary accent and the brand gradient.
   Status colors (mint / warn / danger), illustrations, logos and element artwork keep Lucian's colors. */

:root{
  --ux-page:#F4F4F4;--ux-surface:#FFFFFF;--ux-surface-2:#F0F0F0;--ux-surface-3:#E2E2E2;
  --ux-ink:#111111;--ux-ink-2:#555555;--ux-ink-3:#8A8A8A;
  --ux-line:rgba(0,0,0,.09);--ux-line-2:rgba(0,0,0,.18);
  --ux-accent:#111111;--ux-accent-2:#444444;--ux-accent-soft:rgba(0,0,0,.08);--ux-accent-ink:#FFFFFF;
  --ux-shadow:rgba(0,0,0,.14);--ux-shadow-strong:rgba(0,0,0,.32);
  --ux-grad:linear-gradient(120deg,#000000,#3A3A3A 55%,#777777);
}
:root[data-theme="dark"]{
  --ux-page:#000000;--ux-surface:#111111;--ux-surface-2:#1A1A1A;--ux-surface-3:#262626;
  --ux-ink:#F5F5F5;--ux-ink-2:rgba(245,245,245,.68);--ux-ink-3:rgba(245,245,245,.42);
  --ux-line:rgba(255,255,255,.09);--ux-line-2:rgba(255,255,255,.18);
  --ux-accent:#FFFFFF;--ux-accent-2:#BBBBBB;--ux-accent-soft:rgba(255,255,255,.12);--ux-accent-ink:#000000;
  --ux-shadow:rgba(0,0,0,.5);--ux-shadow-strong:rgba(0,0,0,.75);
  --ux-grad:linear-gradient(120deg,#FFFFFF,#BBBBBB 55%,#777777);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ux-page:#000000;--ux-surface:#111111;--ux-surface-2:#1A1A1A;--ux-surface-3:#262626;
    --ux-ink:#F5F5F5;--ux-ink-2:rgba(245,245,245,.68);--ux-ink-3:rgba(245,245,245,.42);
    --ux-line:rgba(255,255,255,.09);--ux-line-2:rgba(255,255,255,.18);
    --ux-accent:#FFFFFF;--ux-accent-2:#BBBBBB;--ux-accent-soft:rgba(255,255,255,.12);--ux-accent-ink:#000000;
    --ux-shadow:rgba(0,0,0,.5);--ux-shadow-strong:rgba(0,0,0,.75);
    --ux-grad:linear-gradient(120deg,#FFFFFF,#BBBBBB 55%,#777777);
  }
}

/* Site chrome: announcement banner in black / white instead of purple-pink */
.u073-bar{background:linear-gradient(100deg,#0A0A0A,#2A2A2A 40%,#444);color:#fff}
:root[data-theme="dark"] .u073-bar{background:linear-gradient(100deg,#F5F5F5,#DADADA 40%,#C4C4C4);color:#111}
:root[data-theme="dark"] .u073-tag{background:rgba(0,0,0,.12)}
:root[data-theme="dark"] .u073-segs i{background:rgba(0,0,0,.2)}
:root[data-theme="dark"] .u073-segs i::after{background:#111}
:root[data-theme="dark"] .u073-b{color:#111}
:root[data-theme="dark"] .u073-b:hover{background:rgba(0,0,0,.1)}
:root[data-theme="dark"] .u073-b:focus-visible{outline-color:#111}
:root[data-theme="dark"] .u073-bar::after{background:linear-gradient(100deg,transparent,rgba(0,0,0,.12),transparent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .u073-bar{background:linear-gradient(100deg,#F5F5F5,#DADADA 40%,#C4C4C4);color:#111}
  :root:not([data-theme="light"]) .u073-tag{background:rgba(0,0,0,.12)}
  :root:not([data-theme="light"]) .u073-segs i{background:rgba(0,0,0,.2)}
  :root:not([data-theme="light"]) .u073-segs i::after{background:#111}
  :root:not([data-theme="light"]) .u073-b{color:#111}
  :root:not([data-theme="light"]) .u073-b:hover{background:rgba(0,0,0,.1)}
  :root:not([data-theme="light"]) .u073-bar::after{background:linear-gradient(100deg,transparent,rgba(0,0,0,.12),transparent)}
}
/* Glow shadows that were tinted purple follow the black accent */
.u009-orb{box-shadow:0 8px 18px -8px rgba(0,0,0,.5)}
.u062-logo{box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.u001{--drop:rgba(0,0,0,.3)}