/* Shared brand presentation. Color literals live in src/brand/tokens.json. */
:root { --surface-deep: var(--brand-background); --surface-card: rgba(var(--brand-surface-rgb), .7); --neon-cyan: var(--brand-cyan); --neon-indigo: var(--brand-blue); --neon-purple: var(--brand-purple); }
body { font-family: var(--brand-font-body); color: var(--brand-text); background-color: var(--brand-background); }
.font-brand, .font-outfit { font-family: var(--brand-font-heading); }
.font-inter { font-family: var(--brand-font-body); }
.brand-title.brand-title, .text-gradient { background: var(--brand-gradient); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.brand-page { background: radial-gradient(ellipse at top, var(--brand-surface), var(--brand-background) 70%); }
.brand-card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--brand-radius-card); }
.logo-strip { flex-wrap: wrap; }
#page-title { text-wrap: balance; }
.brand-primary.brand-primary { color: var(--brand-text); background: var(--brand-action); background-image: none; border-radius: var(--brand-radius-control); }
.brand-primary.brand-primary:hover { background: var(--brand-actionHover); }
/* Existing utility-based controls use the same readable action colors. */
.text-white:is(.bg-cyan-600, [class~="bg-cyan-600/80"], .bg-blue-500, .bg-indigo-500) { background-color: var(--brand-action); }
.text-white[class~="hover:bg-cyan-500"]:hover { background-color: var(--brand-cyan); color: var(--brand-background); }
.brand-primary:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 4px; }
.neon-glow-cyan { box-shadow: 0 0 20px rgba(var(--brand-cyan-rgb), .2); border-color: rgba(var(--brand-cyan-rgb), .4); }
.neon-text-cyan { color: var(--brand-cyan); text-shadow: 0 0 10px rgba(var(--brand-cyan-rgb), .4); }
.neon-glow-indigo { box-shadow: 0 0 20px rgba(var(--brand-blue-rgb), .3); border-color: rgba(var(--brand-blue-rgb), .5); }
@media (prefers-reduced-motion: reduce) {
  .brand-title, .brand-primary { animation: none; transition: none; }
}