/* Site palette: Graphite (Apple-like neutrals, electric blue, gold accent). Applied with <html data-palette="graphite">. */

/* ---------- Graphite: Apple-like neutrals · electric blue · gold ---------- */
:root[data-palette="graphite"] {
  --bg: #f5f5f7; --bg-2: #ececf0;
  --ink: #1d1d1f; --ink-2: #3a3a3f; --muted: #6e6e73; --faint: #98989d;
  --accent: #0a6cff; --accent-2: #5e5ce6; --accent-3: #f2a516; --accent-ink: #fff;
  --gold: #b97a00;
  --glass: rgba(255,255,255,.72); --glass-strong: rgba(255,255,255,.88); --glass-soft: rgba(255,255,255,.5);
  --blob-1: #c4d4ff; --blob-2: #d8d2ff; --blob-3: #e4e7ee; --blob-4: #ffe0a3;
  --hairline: rgba(0,0,0,.08);
  --shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 36px -14px rgba(0,0,0,.16);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.8) inset, 0 30px 70px -30px rgba(0,0,0,.28);
}
:root[data-palette="graphite"][data-theme="dark"] {
  --bg: #05060b; --bg-2: #0a0b14;
  --ink: #f5f5f7; --ink-2: #d2d2d7; --muted: #a1a1a6; --faint: #6e6e73;
  --accent: #2997ff; --accent-2: #8e8cff; --accent-3: #ffc04a; --accent-ink: #000;
  --gold: #ffc04a;
  --glass: rgba(28,28,30,.6); --glass-strong: rgba(36,36,40,.82); --glass-soft: rgba(28,28,30,.4);
  --glass-border: rgba(255,255,255,.1); --hairline: rgba(255,255,255,.09);
  --blob-1: #1d4fd8; --blob-2: #5b3fd6; --blob-3: #0b7285; --blob-4: #b7791f;
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --bg: #05060b; --bg-2: #0a0b14;
    --ink: #f5f5f7; --ink-2: #d2d2d7; --muted: #a1a1a6; --faint: #6e6e73;
    --accent: #2997ff; --accent-2: #8e8cff; --accent-3: #ffc04a; --accent-ink: #000;
    --gold: #ffc04a;
    --glass: rgba(28,28,30,.6); --glass-strong: rgba(36,36,40,.82); --glass-soft: rgba(28,28,30,.4);
    --glass-border: rgba(255,255,255,.1); --hairline: rgba(255,255,255,.09);
    --blob-1: #1d4fd8; --blob-2: #5b3fd6; --blob-3: #0b7285; --blob-4: #b7791f;
  }
}

:root[data-palette="graphite"] .aurora span { opacity: .7; }

/* Dark-mode shadows for the custom palettes (their light blocks set light shadows). */
:root[data-palette="graphite"][data-theme="dark"] {
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 40px -12px rgba(0,0,0,.6);
  --shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.8);
}
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) {
    --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 40px -12px rgba(0,0,0,.6);
    --shadow-lg: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -30px rgba(0,0,0,.8);
  }
}

/* Dark mode keeps the same living aurora as light mode, just dimmer */
:root[data-palette="graphite"][data-theme="dark"] .aurora span { opacity: .42; }
:root[data-palette="graphite"][data-theme="dark"] .aurora .b4 { opacity: .3; }
@media (prefers-color-scheme: dark) {
  :root[data-palette="graphite"]:not([data-theme="light"]) .aurora span { opacity: .42; }
  :root[data-palette="graphite"]:not([data-theme="light"]) .aurora .b4 { opacity: .3; }
}