/*
* Galatea Design Tokens — v1.0
*
* Single source of truth for the visual system across all web surfaces:
* • Landing (server/dashboard/index.html)
* • Guide (server/dashboard/guide.html)
* • Cabinet (server/dashboard/cabinet.html + assets/dash.css)
* • Legal pages (server/dashboard/privacy.html, terms.html, refund.html)
* • Auth pages (server/dashboard/login.html, register.html, etc.)
*
* The Chrome extension popup (popup.html) is NOT a web surface and cannot
* import this file directly. Its tokens are synced at build time via build.js
* — see docs/brandbook.md § 7 "Popup sync pipeline".
*
* RULES:
* 1. Every surface that uses design tokens MUST import tokens.css FIRST,
* before any other stylesheet, so the cascade starts from a consistent
* base.
* 2. Other stylesheets MAY extend tokens.css (add component-specific rules)
* but MUST NOT override token values. If a new value is needed, add it
* to this file with a documented purpose.
* 3. Every change to tokens.css MUST be reflected in docs/brandbook.md
* in the same commit. Out-of-sync tokens and brandbook = broken contract.
* 4. Data colors and platform colors are NOT theme. Do not use them for
* UI chrome. They exist only for data visualization and platform
* recognition in viewer cards.
*/
:root {
/* ═══════════════════════════════════════════════════════════════════
PRIMARY BRAND
═══════════════════════════════════════════════════════════════════ */
--brand-violet-100: #C4B5FD;
--brand-violet-600: #8B5CF6;
--brand-violet-700: #7C3AED;
--brand-violet-800: #6D28D9;
--brand-magenta-500: #EC4899;
--brand-magenta-600: #DB2777;
/* Landing-compat aliases. Landing (index.html) and guide (guide.html) were
written using short names (--violet-600, --magenta-500) before the brandbook
existed. These aliases let tokens.css import cleanly into those files without
renaming every reference. New code SHOULD prefer --brand-* names. */
--violet-100: var(--brand-violet-100);
--violet-600: var(--brand-violet-600);
--violet-700: var(--brand-violet-700);
--violet-800: var(--brand-violet-800);
--magenta-500: var(--brand-magenta-500);
--magenta-600: var(--brand-magenta-600);
--violet-glow: rgba(139, 92, 246, 0.28);
--violet-soft: rgba(139, 92, 246, 0.12);
--magenta-glow: rgba(236, 72, 153, 0.22);
/* Signature gradient — use sparingly, max 3-4 times per page */
--brand-gradient: linear-gradient(135deg, var(--brand-violet-600) 0%, var(--brand-magenta-500) 100%);
/* ═══════════════════════════════════════════════════════════════════
SEMANTIC BRAND ALIASES
These names describe purpose, not color. Prefer these in components.
═══════════════════════════════════════════════════════════════════ */
--accent: var(--brand-violet-600);
--accent-hover: var(--brand-violet-700);
--accent-active: var(--brand-violet-800);
--accent-glow: rgba(139, 92, 246, 0.28);
--accent-soft: rgba(139, 92, 246, 0.12);
--secondary: var(--brand-magenta-500);
--secondary-hover: var(--brand-magenta-600);
--secondary-soft: rgba(236, 72, 153, 0.22);
/* ═══════════════════════════════════════════════════════════════════
BACKGROUNDS — deep to elevated
═══════════════════════════════════════════════════════════════════ */
--bg: #0A0618; /* page background, darkest */
--bg-alt: #100926; /* alternate sections */
--bg-section: #0F0A1E; /* between cards, slight variation */
--bg-card: #1E1438; /* default card surface */
--bg-card-hover: #251844; /* card hover state */
--bg-elevated: #2A1D4D; /* modal, dropdown, popover */
/* Legacy aliases — kept so existing dash.css compiles after tokens.css
import without renaming every selector. Map to modern names.
NOTE: aliasing alone does NOT migrate cabinet. dash.css defines its own
:root block that cascade-overrides tokens.css. Cabinet migration requires
deleting dash.css's :root block entirely — see cabinet+popup migration
spec for the procedure. */
--bg-deep: var(--bg);
--bg-base: var(--bg-alt);
--surface: var(--bg-card); /* used in cabinet-page.js, admin-page.js — was undefined before tokens.css */
/* ═══════════════════════════════════════════════════════════════════
TEXT
═══════════════════════════════════════════════════════════════════ */
--text: #FFFFFF; /* primary body text, max contrast */
--text-dim: #C4B5FD; /* secondary text — light violet */
--text-muted: #94A3B8; /* muted metadata, labels — lowest AA-passing tier */
--text-subtle: #64748B; /* ⚠️ BELOW WCAG AA (~4.24:1 on --bg). DECORATIVE or LARGE TEXT (≥18px) ONLY. Do not use for body, labels, or placeholders. See docs/brandbook.md § 2.4. */
/* ═══════════════════════════════════════════════════════════════════
BORDERS
Translucent violet reads differently on different backgrounds.
Do not convert to opaque without checking on every surface.
═══════════════════════════════════════════════════════════════════ */
--border: rgba(139, 92, 246, 0.18);
--border-hover: rgba(139, 92, 246, 0.42); /* stronger than default for obvious hover state */
--border-strong: rgba(139, 92, 246, 0.30); /* always-visible divider, nav underline */
--border-subtle: rgba(255, 255, 255, 0.06);
/* ═══════════════════════════════════════════════════════════════════
SEMANTIC STATUS — success, warning, danger, info
Use ONLY for status. Never as brand color.
═══════════════════════════════════════════════════════════════════ */
--success: #10B981;
--success-dim: rgba(16, 185, 129, 0.15);
--success-text: #A7F3D0;
--warning: #F59E0B;
--warning-dim: rgba(245, 158, 11, 0.15);
--warning-text: #FDE68A;
--danger: #EF4444;
--danger-dim: rgba(239, 68, 68, 0.15);
--danger-text: #FCA5A5;
--info: #3B82F6;
--info-dim: rgba(59, 130, 246, 0.15);
--info-text: #BFDBFE;
/* Landing-compat semantic aliases. Landing (index.html), index-next.html,
landing-next.css, and guide.html were written with short direct names
(--live-red, --green-500, --amber-500) before the brandbook existed.
Map them to semantic tokens so landing, /next, and guide all resolve
without each file needing its own :root block. */
--live-red: var(--danger);
--live-glow: rgba(239, 68, 68, 0.4);
--green-500: var(--success);
--amber-500: var(--warning);
--bg-section-alt: #1A1033; /* guide/landing alternate section bg */
/* ═══════════════════════════════════════════════════════════════════
AUTO-SAVE FIELD STATES
Used by auto-save.js indicators and field border feedback.
═══════════════════════════════════════════════════════════════════ */
--as-editing: var(--warning);
--as-saving: var(--accent);
--as-saved: var(--success);
--as-error: #f87171;
/* ═══════════════════════════════════════════════════════════════════
STATUS PILL — connection indicator in cabinet header
═══════════════════════════════════════════════════════════════════ */
--status-connected: var(--success);
--status-warning: var(--warning);
--status-disconnected: #f87171;
/* ═══════════════════════════════════════════════════════════════════
DATA VISUALIZATION — tier hierarchy
NOT theme. Use only on viewer cards, charts, and data tables.
Do not apply to buttons, headings, or brand elements.
═══════════════════════════════════════════════════════════════════ */
--data-whale: #C5A05E; /* bronze — $2000+ spenders */
--data-big-tipper: #95D5B2; /* mint — $500+ spenders */
--data-tipper: #B39DDB; /* light purple — any tippers */
--data-new: #4FC3F7; /* cyan — first visit */
--data-cold: #F87171; /* red — churn risk */
/* Extended tier (Statbate-derived) */
--data-mega-whale: #FF6B35;
--data-whale-gold: #F7C948;
--data-big-spender: #48BB78;
--data-regular: #4299E1;
--data-casual: #9F7AEA;
--data-light: #A0AEC0;
--data-non-spender: #718096;
/* ═══════════════════════════════════════════════════════════════════
PLATFORM BRAND COLORS
Fixed third-party identities. Never change.
═══════════════════════════════════════════════════════════════════ */
--platform-chaturbate: #F97316; /* Chaturbate orange */
--platform-stripchat: #EF4444; /* Stripchat red */
--platform-fansly: #3B82F6; /* Fansly blue */
/* ═══════════════════════════════════════════════════════════════════
TYPOGRAPHY
═══════════════════════════════════════════════════════════════════ */
--font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-display: var(--font);
--font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
/* Font-loading — actual tag lives in each HTML file's :
*/
/* Type scale — px-based, 8pt-ish progression */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-md: 18px;
--text-lg: 20px;
--text-xl: 24px;
--text-2xl: 32px;
--text-3xl: 48px;
--text-4xl: 64px;
/* Line heights — relative */
--lh-tight: 1.1; /* large display headings */
--lh-snug: 1.3; /* h2, h3 */
--lh-normal: 1.5; /* body short */
--lh-relaxed: 1.65; /* body long-form, reading */
/* Letter spacing */
--ls-tight: -0.035em; /* display */
--ls-snug: -0.02em; /* headings */
--ls-normal: 0;
--ls-wide: 0.08em; /* labels, chips, eyebrows */
--ls-wider: 0.1em; /* uppercase nav, buttons */
/* ═══════════════════════════════════════════════════════════════════
SPACING — 8pt scale (with 4 for tight cases)
═══════════════════════════════════════════════════════════════════ */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
--space-9: 96px;
--space-10: 128px;
/* ═══════════════════════════════════════════════════════════════════
RADIUS
═══════════════════════════════════════════════════════════════════ */
--r-xs: 6px; /* chips, small buttons */
--r-sm: 10px; /* nav CTAs, inputs */
--r-md: 14px; /* cards small */
--r-lg: 20px; /* cards, modals */
--r-xl: 28px; /* hero mockups */
--r-full: 9999px; /* pills, avatars */
/* Legacy compat (dash.css uses these names) */
--radius: var(--r-sm);
--radius-sm: var(--r-xs);
--radius-lg: var(--r-md);
/* ═══════════════════════════════════════════════════════════════════
SHADOWS & GLOW
═══════════════════════════════════════════════════════════════════ */
--sh-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
--sh-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(139, 92, 246, 0.15);
--sh-lg: 0 20px 48px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(139, 92, 246, 0.18);
--sh-xl: 0 30px 80px rgba(0, 0, 0, 0.6), 0 12px 28px rgba(139, 92, 246, 0.22);
--sh-glow-v: 0 0 40px rgba(139, 92, 246, 0.35); /* violet glow */
--sh-glow-m: 0 0 40px rgba(236, 72, 153, 0.3); /* magenta glow */
/* ═══════════════════════════════════════════════════════════════════
LAYOUT — container widths and grid defaults
═══════════════════════════════════════════════════════════════════ */
--container: 1180px; /* landing, features */
--container-narrow: 860px; /* cabinet main column */
--container-reading: 720px; /* legal, guide long-form */
--gutter: var(--space-5);
--gutter-lg: var(--space-6);
/* ═══════════════════════════════════════════════════════════════════
MOTION
═══════════════════════════════════════════════════════════════════ */
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
/* ═══════════════════════════════════════════════════════════════════
Z-INDEX SCALE
═══════════════════════════════════════════════════════════════════ */
--z-base: 1;
--z-sticky: 50;
--z-nav: 100;
--z-dropdown: 200;
--z-modal-backdrop: 900;
--z-modal: 1000;
--z-toast: 1100;
}
/* ═══════════════════════════════════════════════════════════════════
BASELINE RESET — minimal, applies to every surface that imports
this file. Keeps cross-surface consistency even without dash.css /
landing styles loaded.
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
font-size: 16px;
background: var(--bg);
overflow-x: clip;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: var(--lh-relaxed);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
a {
color: inherit;
text-decoration: none;
}
img {
display: block;
max-width: 100%;
}
button {
font: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 4px;
}
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
}
/* Scrollbar — subtle, matches palette */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
background: var(--border-strong);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }