/* =====================================================================
   WALLZY: the brand shared by the public pages (audit UX-08, 2026-10-21)
   Deck-box dark, foil gold, the Bebas Neue wordmark: the homepage's look
   (direction B of the 2026-10-20 redesign), for every page a visitor from a
   search or an ad lands on, so they read as one site. A page opts in with
   class="site-dark" on <body> and loads this after its own stylesheets:
   the homepage (with landing.css for its sections), every page build-pages
   writes (/templates/, /make/, the guides, ideas, about, the legal pages,
   an added template's page) and the gallery's card and maker pages.
   The pages that are tools (tutorials, gallery, marketplace, account, the
   editor) keep the light and dark switch.

   It sets the --ui-* roles to their dark values, so everything drawn from
   them (content, plan cards, dialogs, menus) follows, plus the header, the
   footer, the buttons and the wordmark. Moved here from landing.css.
   ===================================================================== */
body.site-dark {
  --ink: #0b0d14; --ink-2: #131722; --ink-3: #1b2030; --edge: #272d3d; --edge-2: #3a4152;
  --gold: #e9b95c; --gold-hi: #f5cf82; --paper: #f3efe6; --mute: #a9adbb; --mute-2: #8b90a0;
  --foil: linear-gradient(100deg, #38e1ff, #8f7bff 45%, #e9b95c 80%);
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --r-btn: 6px; --r-panel: 12px; --r-card: 20px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: min(1240px, calc(100% - 32px));

  /* The site's roles, dark, whatever the theme. */
  --ui-bg: #0b0d14; --ui-bg-2: #0f121a; --ui-panel: #141824; --ui-panel-2: #1b2030;
  --ui-line: rgba(255, 255, 255, .07); --ui-line-2: rgba(255, 255, 255, .13);
  --ui-text: #f1ede4; --ui-dim: #a3a7b5; --ui-faint: #8b90a0; --ui-strong: #fffaf0;
  --ui-accent: #e9b95c; --ui-accent-hover: #f5cf82; --ui-accent-2: #38e1ff; --ui-gold: #e9b95c;
  --ui-accent-soft: rgba(233, 185, 92, .12); --ui-accent-soft-2: rgba(233, 185, 92, .2); --ui-accent-text: #f3d595; --ui-on-accent: #14110a;
  --ui-hover-line: rgba(255, 255, 255, .22); --ui-track: rgba(255, 255, 255, .1);
  --ui-float: rgba(20, 24, 36, .94); --ui-scrim: rgba(5, 6, 10, .74); --ui-scrim-strong: rgba(6, 8, 13, .86);
  --ui-shadow: rgba(0, 0, 0, .5); --ui-shadow-strong: rgba(0, 0, 0, .75); --ui-scroll: #2c3242;
  --ui-danger-text: #ffd7dd; --ui-danger-bg: rgba(244, 63, 94, .13); --ui-danger-line: rgba(244, 63, 94, .38);
  --ui-ok-text: #cfe9d6; --ui-ok-bg: rgba(74, 222, 128, .12); --ui-ok-line: rgba(74, 222, 128, .32);
  --ui-warn-text: #fde7b0; --ui-warn-bg: rgba(251, 191, 36, .1); --ui-warn-line: rgba(251, 191, 36, .3);

  background: var(--ink); color: var(--paper); color-scheme: dark;
}
html:has(body.site-dark) { background: #0b0d14; }
.site-dark :focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; }

/* Buttons: one gold, one outline. */
.site-dark .btn-primary { background: var(--gold); color: #14110a; border-color: transparent; }
.site-dark .btn-primary:hover { background: var(--gold-hi); color: #14110a; transform: translateY(-1px); }
.site-dark .btn-ghost { background: transparent; border: 1px solid var(--edge-2); color: var(--paper); }
.site-dark .btn-ghost:hover { border-color: var(--paper); background: transparent; }

/* ---------- Header ---------- */
.site-dark .home-header {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--s5);
  min-height: 64px; padding: 0 max(16px, calc((100% - 1240px) / 2));
  background: rgba(11, 13, 20, .84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.site-dark .brand { text-decoration: none; gap: 10px; }
.site-dark .brand-mark { width: 34px; height: 34px; }
.site-dark .brand .brand-name { font-size: 26px; letter-spacing: .12em; }
.site-dark .brand p { display: none; }
.site-dark .home-nav { display: flex; gap: var(--s5); }
.site-dark .home-header > .home-nav { margin-left: auto; }
.site-dark .home-nav a { color: var(--mute); text-decoration: none; font-size: 15px; padding: 10px 0; background: none; }
.site-dark .home-nav a:hover, .site-dark .home-nav a[aria-current="page"] { color: var(--paper); }
.site-dark [data-auth-slot] { display: flex; align-items: center; gap: var(--s2); }
.site-dark [data-auth-slot] > .btn { min-height: 40px; height: auto; padding: 8px 12px; background: transparent; border-color: transparent; color: var(--mute); font-weight: 600; }
.site-dark [data-auth-slot] > .btn:hover { color: var(--paper); }
.site-dark [data-auth-slot] > .btn-primary { border-color: var(--edge-2); color: var(--paper); }
.site-dark .home-actions { display: flex; align-items: center; gap: var(--s3); }
.site-dark .home-actions > .btn-primary { min-height: 40px; height: auto; padding: 10px 16px; }
/* Dark in both themes: beat the light theme's own rules. */
body.site-dark .home-header .brand .brand-name { background: linear-gradient(90deg, #fffaf0, #f3d595 55%, #e9b95c); -webkit-background-clip: text; background-clip: text; color: transparent; }
body.site-dark .home-header [data-auth-slot] > .btn-primary { background: transparent; }
body.site-dark .home-header [data-auth-slot] > .btn-primary:hover { border-color: var(--paper); }

/* ---------- Footer ---------- */
.site-dark .home-footer { background: #08090e; border-top: 1px solid var(--edge); padding: var(--s8) max(16px, calc((100% - 1240px) / 2)) var(--s6); color: var(--mute); font-size: 15px; }
.site-dark .foot-cols { display: grid; grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); gap: var(--s6); max-width: none; margin: 0; padding: 0; }
.site-dark .foot-cols > div:first-child p:not(.foot-h) { max-width: 22em; }
.site-dark .foot-h { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute-2); margin: 0 0 var(--s4); }
.site-dark .foot-cols p { margin: 10px 0; }
.site-dark .foot-cols a { color: var(--paper); text-decoration: none; }
.site-dark .foot-cols a:hover { color: var(--gold); }
.site-dark .foot-note { margin: var(--s7) 0 0; padding: var(--s5) 0 0; border-top: 1px solid var(--edge); font-size: 14px; max-width: none; }
.site-dark .foot-legal { margin: var(--s5) 0 0; padding: 0; max-width: none; font-size: 13px; color: var(--mute); }
.site-dark .foot-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.site-dark .foot-legal span { margin: 0 4px; }

/* ---------- Content pages: headings in the brand's display face ---------- */
.site-dark.content-page h1, .site-dark .pg-article h1, .site-dark .pg-hero h1 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; line-height: 1; color: var(--paper); }
.site-dark .eyebrow { color: var(--gold); }
.site-dark .prose a, .site-dark .pg-article a:not(.btn) { color: var(--ui-accent-text); }

@media (max-width: 1023px) {
  .site-dark .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-dark .foot-cols > div:first-child { grid-column: 1 / -1; }
}
/* On a phone the content pages' header wraps to three rows: it scrolls away instead of
   covering a quarter of the screen (the homepage keeps its own, with a menu button). */
@media (max-width: 760px) {
  .site-dark:not(.landing) .home-header { position: static; flex-wrap: wrap; row-gap: 0; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 640px) {
  .site-dark .brand-text { display: none; }
  .site-dark .home-actions > .btn-primary { padding: 10px 14px; }
}