/* =========================================================================
NEXTMEDIA Voice — Design Tokens
=========================================================================
The single source of truth for colors, type, radius, shadow and spacing
in the NEXTMEDIA Voice product. Import this file first in any mockup:
All values below are lifted from the live codebase
(src/index.css + tailwind.config.ts + components/*.tsx).
When the app changes, update this file — not the copies in mockups.
========================================================================= */
:root {
/* ---------- Brand ---------- */
--color-primary: #7f0df2; /* Brand violet — buttons, active states, brand tile */
--color-primary-light: #9b3ff7; /* Hover, gradient stop */
--color-primary-dark: #5a06b0; /* Pressed, gradient stop */
/* ---------- Surface stack (dark theme is primary) ---------- */
--color-bg: #0a070e; /* App canvas */
--color-background-dark: #0a070e; /* alias · matches codebase var */
--color-surface: #191022; /* Panels, inputs, resting cards */
--color-surface-dark: #191022; /* alias · matches codebase var */
--color-surface-raised: #120918; /* Sidebar, modals (subtly darker than surface) */
--color-border: #2d1b40; /* Hairlines everywhere */
--color-border-dark: #2d1b40; /* alias · matches codebase var */
/* ---------- Semantic ---------- */
--color-success: #34d399; /* emerald-400 */
--color-warning: #fbbf24; /* amber-400 */
--color-error: #f87171; /* red-400 */
--color-info: #60a5fa; /* blue-400 */
/* ---------- Text (slate steps) ---------- */
--text-hi: #f1f5f9; /* slate-100 — headings, high-emphasis body */
--text-md: #cbd5e1; /* slate-300 — body copy */
--text-lo: #94a3b8; /* slate-400 — secondary/label */
--text-muted: #64748b; /* slate-500 — helper, empty-state */
--text-faint: #475569; /* slate-600 — placeholder */
/* ---------- Type ---------- */
--font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-mono: ui-monospace, "SF Mono", Menlo, monospace;
/* Scale — matches Tailwind text-* utilities */
--text-4xl: 36px; /* hero */
--text-3xl: 30px; /* auth headline */
--text-2xl: 24px; /* page title */
--text-xl: 20px; /* wordmark, section heading */
--text-lg: 18px; /* card title */
--text-base:16px; /* body, form */
--text-sm: 14px; /* body-sm, nav label */
--text-xs: 12px; /* badge, meta */
/* ---------- Radius ---------- */
--radius-sm: 4px;
--radius-md: 6px; /* buttons, inputs */
--radius-lg: 8px; /* brand tile, nav item */
--radius-xl: 12px; /* cards, panels */
--radius-2xl: 16px; /* hero surfaces */
--radius-full: 9999px;
/* ---------- Shadow ---------- */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 25px -5px rgba(127, 13, 242, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.5);
--shadow-glow:0 0 40px rgba(127, 13, 242, 0.5), 0 10px 20px rgba(0, 0, 0, 0.4);
/* ---------- Spacing (4-based) ---------- */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
/* ---------- Motion ---------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--dur-fast: 120ms;
--dur-base: 180ms;
--dur-slow: 280ms;
}
/* =========================================================================
Baseline reset — dark-first. Apply to or as needed.
========================================================================= */
html, body {
margin: 0;
background: var(--color-bg);
color: var(--text-hi);
font-family: var(--font-display);
font-size: var(--text-base);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Material Symbols default sizing (the icon font itself is loaded by fonts/fonts.css). */
.material-symbols-outlined {
font-family: "Material Symbols Outlined";
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
display: inline-block;
white-space: nowrap;
direction: ltr;
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
font-variation-settings:
"FILL" 0,
"wght" 400,
"GRAD" 0,
"opsz" 24;
}