/* Hoodveil shared base: local fonts + design tokens (home and app both load this first). */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter-var.woff2') format('woff2'); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-serif-400i.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fragment Mono'; src: url('/assets/fonts/fragment-mono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* default palette: EMBER (gold/amber on black). Other palettes below, picked by /lib/palette.js (?pal=). */
  --brand: #c98a2e;
  --brand-rgb: 201, 138, 46;
  --brand-hi: #e6b25a;            /* lighter end of brand gradients */
  --brand-lo: #a5691c;            /* darker end of brand gradients */
  --on-brand: #120b02;            /* text/icons on brand-filled surfaces (buttons, statement panel, CTA card): 6:1+ on brand */
  --on-brand-rgb: 18, 11, 2;
  --accent: #f2c36b;
  --accent-rgb: 242, 195, 107;
  --accent-soft: #fde9c4;
  --accent-deep: #2b1b06;
  --cyan: #ff8b4a;                /* legacy name: second accent */
  --alt-rgb: 255, 139, 74;
  --stream-main: #f3b24c;         /* WebGL light stream colours */
  --stream-alt: #ff8b4a;
  --stream-core: #fff3dc;
  --stream-deep: #3a2208;
  --bg: #000;
  --fg: #fff;
  --ink: #f4f5f6;
  --muted: #9ba0a6;
  --dim: #747980;
  --surface: #131416;
  --surface-2: #121315;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .16);
  --glass: rgba(14, 15, 17, .42);
  --ok: #7ee2a8;
  --warn: #ffcf6e;
  --bad: #ff7b8a;
  --mono: 'Fragment Mono', ui-monospace, monospace;
  --serif: 'Instrument Serif', Georgia, serif;
  --sans: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
}
:root[data-pal="violet"] {
  --brand: #72418f; --brand-rgb: 114, 65, 143; --brand-hi: #8d5bab; --brand-lo: #5e3477;
  --accent: #c290df; --accent-rgb: 194, 144, 223; --accent-soft: #eddff6; --accent-deep: #301a3d;
  --on-brand: #ffffff; --on-brand-rgb: 255, 255, 255;
  --cyan: #52c8ff; --alt-rgb: 82, 200, 255;
  --stream-main: #c290df; --stream-alt: #52c8ff; --stream-core: #eddff6; --stream-deep: #301a3d;
}
:root[data-pal="neon"] {
  --brand: #b8e600; --brand-rgb: 184, 230, 0; --brand-hi: #d4ff3a; --brand-lo: #8fb300;
  --accent: #ccff00; --accent-rgb: 204, 255, 0; --accent-soft: #f1ffc4; --accent-deep: #1d2600;
  --on-brand: #0a0b0a; --on-brand-rgb: 10, 11, 10;
  --cyan: #2de0c0; --alt-rgb: 45, 224, 192;
  --stream-main: #c8ff1a; --stream-alt: #2de0c0; --stream-core: #f6ffdc; --stream-deep: #1d2600;
}
:root[data-pal="ice"] {
  --brand: #3563f0; --brand-rgb: 53, 99, 240; --brand-hi: #5a85ff; --brand-lo: #2447c4;
  --accent: #9ec5ff; --accent-rgb: 158, 197, 255; --accent-soft: #e4efff; --accent-deep: #0f1d4a;
  --on-brand: #ffffff; --on-brand-rgb: 255, 255, 255;
  --cyan: #b48cff; --alt-rgb: 180, 140, 255;
  --stream-main: #8db6ff; --stream-alt: #b48cff; --stream-core: #eef4ff; --stream-deep: #0f1d4a;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Hoodveil cursor (/lib/cursor.js): fine pointers only, never blocks clicks ---------- */
html.hvc-on, html.hvc-on * { cursor: none !important; }
html.hvc-on input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html.hvc-on textarea, html.hvc-on [contenteditable=""], html.hvc-on [contenteditable="true"],
html.hvc-on code, html.hvc-on pre, html.hvc-on .ca-addr, html.hvc-on [data-cursor="text"] { cursor: text !important; }
html.hvc-on.hvc-native, html.hvc-on.hvc-native * { cursor: auto !important; }
.hvc { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.hvc.on { opacity: 1; }
.hvc.hide, .hvc.sel { opacity: 0; }
.hvc-ring, .hvc-dot { position: absolute; left: 0; top: 0; will-change: transform; }
.hvc-ring svg { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; overflow: visible; transition: transform .35s var(--ease), filter .35s var(--ease); }
.hvc.link .hvc-ring svg { transform: scale(1.32); filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), .55)); }
.hvc-c { fill: none; stroke: rgba(var(--accent-rgb), .42); stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: opacity .3s, transform .35s var(--ease); }
.hvc.link .hvc-c { opacity: 0; transform: scale(.6); }
.hvc-arc { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 14 86; transform-box: fill-box; transform-origin: center; animation: hvc-orbit 3.6s linear infinite; transition: opacity .25s; }
.hvc.link .hvc-arc { opacity: 0; }
.hvc-hood { fill: rgba(var(--accent-rgb), .07); stroke: var(--accent); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; transition: stroke-dashoffset .5s var(--ease), opacity .2s; }
.hvc.link .hvc-hood { stroke-dashoffset: 0; opacity: 1; }
.hvc-pulse { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hvc.click .hvc-pulse { animation: hvc-pulse .5s var(--ease); }
.hvc-dot i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px rgba(var(--accent-rgb), .9), 0 0 16px rgba(var(--accent-rgb), .4); transition: left .25s var(--ease), top .25s var(--ease), width .25s var(--ease), height .25s var(--ease), border-radius .25s var(--ease), transform .15s var(--ease); }
.hvc.link .hvc-dot i { left: -5px; top: -1.5px; width: 10px; height: 3px; border-radius: 2px; }
.hvc.click .hvc-dot i { transform: scale(.6); }
@keyframes hvc-orbit { to { transform: rotate(360deg); } }
@keyframes hvc-pulse { 0% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(2.1); } }
@media (prefers-reduced-motion: reduce) { .hvc { display: none; } html.hvc-on, html.hvc-on * { cursor: auto !important; } }