/* ========================================================================= C9cast admin — design tokens [SOT] ------------------------------------------------------------------------- THE ONLY FILE THAT MAY CONTAIN RAW COLOR VALUES. Every other stylesheet (app.css, screens.css, content.css) must use the semantic tokens below: var(--bg-surface), var(--text-muted), var(--status-success-soft) … Never hardcode hex/rgb in components. Layers: 1. Primitives (--gray-*, --brand-*, --green-*, …) — palette only, never referenced directly by components. 2. Semantic (--bg-*, --text-*, --border-*, --accent-*, --status-*) — what components use. Gradients and wave artwork are brand-surface tokens too (sidebar, login, primary button). Data views stay flat: no gradients inside cards/tables. ========================================================================= */ /* Aptos Display / Aptos are Microsoft fonts: used when installed locally (Windows 11, Microsoft 365). They cannot be redistributed, so every other machine falls back to the bundled Inter (very close proportions). */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/InterVariable.woff2') format('woff2'); } :root { /* ---------------------------------------------------------- primitives */ --gray-0: #ffffff; --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-75: #f6f8fb; --gray-100: #f2f4f7; --gray-150: #eef0f3; --gray-200: #e4e7ec; --gray-300: #d0d5dd; --gray-400: #98a2b3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #1d2939; --gray-850: #182230; --gray-900: #101828; /* C9cast brand: dark purple → purple → pink (accent) → light pink. brand-600 (#c72b78) is the accent: 5.2:1 against white text (WCAG AA). */ --navy-950: #1d0a28; --navy-900: #2f1244; --navy-800: #6a2f73; --cyan-400: #ff7ab8; --brand-50: #fef0f7; --brand-100: #fcdcec; --brand-200: #f8b6d6; --brand-300: #f28bbd; --brand-500: #e73e92; --brand-600: #c72b78; --brand-700: #a9215f; --brand-800: #8a1b4e; --green-50: #ecfdf3; --green-200: #abefc6; --green-500: #12b76a; --green-600: #079455; --green-700: #067647; --blue-50: #eff8ff; --blue-200: #b2ddff; --blue-500: #2e90fa; --blue-600: #1570ef; --blue-700: #175cd3; --amber-50: #fffaeb; --amber-200: #fedf89; --amber-500: #f79009; --amber-600: #dc6803; --amber-700: #b54708; --red-50: #fef3f2; --red-200: #fecdca; --red-500: #f04438; --red-600: #d92d20; --red-700: #b42318; /* ------------------------------------------------------------- surfaces */ --bg-app: var(--gray-75); --bg-surface: var(--gray-0); --bg-surface-subtle: var(--gray-50); /* table heads, footers, wells */ --bg-surface-hover: var(--gray-50); /* row / item hover */ --bg-surface-muted: var(--gray-100); /* tracks, chips, neutral fills */ --bg-surface-pressed: var(--gray-150); --bg-inverse: var(--gray-900); /* toasts, code blocks */ --bg-media: var(--gray-900); /* video / slide stages */ --bg-overlay: rgba(16, 24, 40, 0.5); /* modal backdrop */ --bg-overlay-soft: rgba(247, 248, 250, 0.92); /* sticky save bars */ /* -------------------------------------------------------------- sidebar */ --bg-sidebar: var(--navy-950); --gradient-sidebar: linear-gradient(180deg, var(--navy-950) 0%, var(--navy-900) 48%, var(--navy-800) 100%); /* Waves occupy the lower ~62% of the sidebar (bottom-anchored; sized in app.css). Non-scaling strokes keep the crest lines thin. */ --wave-sidebar: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 240 620%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 290 C60 220 150 340 240 210 L240 620 L0 620 Z%27 fill=%27rgba(231, 62, 146, 0.30)%27/%3E%3Cpath d=%27M0 400 C80 330 170 450 240 330 L240 620 L0 620 Z%27 fill=%27rgba(255, 122, 184, 0.10)%27/%3E%3Cpath d=%27M0 500 C70 450 160 545 240 450 L240 620 L0 620 Z%27 fill=%27rgba(231, 62, 146, 0.36)%27/%3E%3Cpath d=%27M0 330 C60 260 150 380 240 250%27 fill=%27none%27 stroke=%27rgba(255, 122, 184, 0.45)%27 stroke-width=%271.4%27 vector-effect=%27non-scaling-stroke%27/%3E%3Cpath d=%27M-10 560 C70 520 150 400 250 270%27 fill=%27none%27 stroke=%27rgba(255, 122, 184, 0.18)%27 stroke-width=%271.1%27 vector-effect=%27non-scaling-stroke%27/%3E%3Cpath d=%27M0 440 C95 380 160 500 240 400%27 fill=%27none%27 stroke=%27rgba(246, 150, 200, 0.30)%27 stroke-width=%271%27 vector-effect=%27non-scaling-stroke%27/%3E%3C/svg%3E"); --glow-sidebar: radial-gradient(110% 38% at 85% 100%, rgba(255, 122, 184, 0.26), transparent 70%); --bg-sidebar-hover: rgba(255, 255, 255, 0.07); --gradient-nav-active: linear-gradient(90deg, var(--brand-600) 0%, #d1307f 100%); --shadow-nav-active: 0 6px 16px -6px rgba(255, 122, 184, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.12); --bg-sidebar-active: var(--brand-600); /* flat fallback for the pill */ --bg-sidebar-raised: rgba(255, 255, 255, 0.06); /* account panel */ --border-sidebar: rgba(255, 255, 255, 0.10); --text-sidebar: #ead7f0; /* 12.5:1 on navy, 7.2:1 on royal */ --text-sidebar-strong: var(--gray-0); --text-sidebar-muted: #c9a8d6; /* section labels/icons: ≥4.9:1 */ --icon-sidebar-active: var(--gray-0); --accent-cyan: var(--cyan-400); /* accents only, never under text */ /* ------------------------------------------------- brand surfaces/waves */ --gradient-panel-dark: linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%); --wave-panel-dark: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 800 1000%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 640 C220 560 420 720 800 600 L800 1000 L0 1000 Z%27 fill=%27rgba(231, 62, 146, 0.22)%27/%3E%3Cpath d=%27M0 760 C260 690 520 840 800 740 L800 1000 L0 1000 Z%27 fill=%27rgba(255, 122, 184, 0.10)%27/%3E%3Cpath d=%27M0 860 C240 800 560 930 800 850 L800 1000 L0 1000 Z%27 fill=%27rgba(231, 62, 146, 0.25)%27/%3E%3Cpath d=%27M0 700 C230 620 470 780 800 660%27 fill=%27none%27 stroke=%27rgba(255, 122, 184, 0.40)%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M0 300 C260 250 520 360 800 280%27 fill=%27none%27 stroke=%27rgba(246, 150, 200, 0.10)%27 stroke-width=%271%27/%3E%3C/svg%3E"); --wave-light: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1200 400%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 210 C300 140 620 290 1200 170 L1200 400 L0 400 Z%27 fill=%27rgba(231, 62, 146, 0.06)%27/%3E%3Cpath d=%27M0 290 C340 230 720 360 1200 260 L1200 400 L0 400 Z%27 fill=%27rgba(255, 122, 184, 0.08)%27/%3E%3Cpath d=%27M0 250 C320 180 680 320 1200 210%27 fill=%27none%27 stroke=%27rgba(231, 62, 146, 0.14)%27 stroke-width=%271.5%27/%3E%3C/svg%3E"); --bg-wave-light: linear-gradient(180deg, var(--gray-0) 0%, #fbf2f8 100%); /* primary button: brand-600 → #d1307f keeps ≥4.55:1 with white text */ --gradient-primary: linear-gradient(90deg, var(--brand-600) 0%, #d1307f 100%); --gradient-primary-hover: linear-gradient(90deg, var(--brand-700) 0%, var(--brand-600) 100%); --gradient-shimmer: linear-gradient(90deg, transparent, var(--bg-surface-subtle), transparent); /* skeleton loading only */ /* -------------------------------------------------------------- borders */ --border-default: var(--gray-200); --border-subtle: var(--gray-150); --border-strong: var(--gray-300); /* ----------------------------------------------------------------- text */ --text-primary: var(--gray-900); --text-heading: var(--navy-950); /* page + card titles, KPI values */ --text-secondary: var(--gray-600); --text-muted: var(--gray-500); --text-faint: var(--gray-400); /* placeholders, disabled */ --text-inverse: var(--gray-0); --text-on-accent: var(--gray-0); --text-link: var(--brand-600); /* --------------------------------------------------------------- accent */ --accent-primary: var(--brand-600); --accent-primary-hover: var(--brand-700); --accent-primary-active: var(--brand-800); --accent-primary-soft: var(--brand-50); --accent-primary-soft-strong: var(--brand-100); --accent-primary-border: var(--brand-200); --accent-primary-text: var(--brand-700); /* accent text on soft bg */ --focus-ring: rgba(231, 62, 146, 0.28); --selection: var(--brand-100); /* --------------------------------------------------------------- status */ /* success = healthy / playing */ --status-success: var(--green-600); --status-success-strong: var(--green-700); --status-success-soft: var(--green-50); --status-success-border: var(--green-200); --status-success-fill: var(--green-500); /* charts, dots, bars */ /* info = online / informational / processing */ --status-info: var(--blue-600); --status-info-strong: var(--blue-700); --status-info-soft: var(--blue-50); --status-info-border: var(--blue-200); --status-info-fill: var(--blue-500); /* warning = unassigned / attention */ --status-warning: var(--amber-600); --status-warning-strong: var(--amber-700); --status-warning-soft: var(--amber-50); --status-warning-border: var(--amber-200); --status-warning-fill: var(--amber-500); /* danger = offline / failed / destructive */ --status-danger: var(--red-600); --status-danger-strong: var(--red-700); --status-danger-soft: var(--red-50); --status-danger-border: var(--red-200); --status-danger-fill: var(--red-500); --status-danger-hover: var(--red-700); /* neutral = paused / expired / signed out */ --status-neutral: var(--gray-500); --status-neutral-strong: var(--gray-700); --status-neutral-soft: var(--gray-100); --status-neutral-border: var(--gray-200); --status-neutral-fill: var(--gray-300); /* ------------------------------------------------------- inverse accents */ --toast-success: var(--green-200); --toast-info: var(--blue-200); --toast-error: var(--red-200); --on-dark-subtle: rgba(255, 255, 255, 0.12); --on-dark-border: rgba(255, 255, 255, 0.2); /* ---------------------------------------------------------------- shape */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-full: 999px; --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.04); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.14), 0 4px 8px -4px rgba(16, 24, 40, 0.06); /* -------------------------------------------------------------- spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ----------------------------------------------------------- typography */ --font-sans: 'Aptos Display', 'Aptos', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 18px; --fs-2xl: 22px; --fs-kpi: 32px; --fs-page: 32px; /* -------------------------------------------------------------- layout */ --sidebar-w: 240px; --sidebar-rail-w: 68px; --topbar-h: 60px; --control-h: 36px; --control-h-sm: 30px; --control-h-lg: 40px; /* ------------------------------------------------------- embedded icons */ /* gray-500 chevron for native