/* * Wizards Tower — Base design tokens * Tech-noir palette: deep navy/charcoal base, cyan + violet accents. * See assets/css/components.css for component-level styles. */ :root { /* Surface colors */ --wt-void: #0B1320; --wt-void-deep: #070D17; --wt-panel: #121E32; --wt-panel-edge: #1E3149; /* Text colors */ --wt-steel: #9FB4C7; --wt-steel-dim: #5E7589; --wt-off-white: #EAF1F7; /* Accent colors */ --wt-cyan: #4FD8E0; --wt-cyan-dim: #2A8A92; --wt-violet: #8B7FE0; --wt-gold: #D9A748; /* Genre accent system — overridden per-page via data-genre attribute on */ --wt-accent: var(--wt-steel); --wt-accent-dim: var(--wt-steel-dim); --wt-accent-glow: rgba(159, 180, 199, 0.2); /* Typography */ --wt-font-display: 'Cinzel', serif; --wt-font-body: 'Cormorant Garamond', serif; --wt-font-mono: 'JetBrains Mono', monospace; /* Spacing scale */ --wt-space-xs: 8px; --wt-space-sm: 16px; --wt-space-md: 24px; --wt-space-lg: 48px; --wt-space-xl: 90px; /* Radius */ --wt-radius-sm: 8px; --wt-radius-md: 14px; --wt-radius-lg: 16px; } /* Genre accent overrides — applied via body[data-genre="..."] */ body[data-genre="scifi"] { --wt-accent: var(--wt-cyan); --wt-accent-dim: var(--wt-cyan-dim); --wt-accent-glow: rgba(79, 216, 224, 0.25); } body[data-genre="horror"] { --wt-accent: var(--wt-violet); --wt-accent-dim: #564E94; --wt-accent-glow: rgba(139, 127, 224, 0.25); } body[data-genre="fantasy"] { --wt-accent: var(--wt-gold); --wt-accent-dim: #A87C2E; --wt-accent-glow: rgba(217, 167, 72, 0.25); } body[data-genre="western"] { --wt-accent: #D98C48; --wt-accent-dim: #A8642E; --wt-accent-glow: rgba(217, 140, 72, 0.25); } /* Base resets and typography */ * { box-sizing: border-box; } body { background: var(--wt-void); color: var(--wt-off-white); font-family: var(--wt-font-body); font-size: 1.15rem; line-height: 1.65; background-image: radial-gradient(ellipse at top right, var(--wt-accent-glow), transparent 50%), radial-gradient(ellipse at bottom left, rgba(159, 180, 199, 0.04), transparent 50%); } h1, h2, h3, h4, .wt-display { font-family: var(--wt-font-display); letter-spacing: 0.02em; } .wt-mono { font-family: var(--wt-font-mono); } a { color: var(--wt-cyan); } /* Visible keyboard focus — accessibility floor */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--wt-cyan); outline-offset: 2px; } /* Respect reduced motion preference */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }