/* ========================================================================== AdultCams Frontend — Design Tokens Single source of truth for the entire frontend UI. /css/tokens-theme.css 2026-09-28: Structural token schema shared across the network per project convention, with AdultCams' OWN accent color substituted in. Accent is "Live Green" emerald-500 #10B981 — green reads as "online / broadcasting now", which is the whole product of a live-cam directory. Also clear of every claimed hue in the palette registry (amber, peach, honey, fire orange, rose, blues, violet, red). All component files reference these variables. No hardcoded colors, spacing, or sizes in component files. ========================================================================== */ :root { /* ====================== COLORS — Base ====================== */ --color-white: rgba(255, 255, 255, 1); /* ====================== COLORS — Surface & Background ====================== */ --color-bg-primary: rgba(8, 8, 12, 1); /* Deep charcoal - page background (shared network tone) */ --color-bg-surface: rgba(18, 18, 24, 1); /* Card surfaces, panels */ --color-bg-elevated: rgba(28, 28, 36, 1); /* Hover states, raised elements */ --color-bg-overlay: rgba(0, 0, 0, 0.7); /* Overlay backdrops */ /* ====================== COLORS — Border ====================== */ --color-border: rgba(45, 45, 60, 1); /* Subtle borders */ --color-border-hover: rgba(16, 185, 129, 1); /* Accent borders on hover — Live Green */ /* ====================== COLORS — Text ====================== */ --color-text-primary: rgba(250, 250, 255, 1); /* Crisp white - headings, primary text */ --color-text-secondary: rgba(170, 170, 190, 1); /* Soft gray - descriptions */ --color-text-muted: rgba(120, 120, 140, 1); /* Dim text - secondary info */ /* text-accent is the lighter emerald-400 — #10B981 on near-black is ~5.9:1 (fine for badges/large text but murky at username/tag-link size); #34D399 is ~8.6:1. Filled surfaces (badges, tabs) keep the base accent — this token is text-only. */ --color-text-accent: rgba(52, 211, 153, 1); /* Emerald-400 #34D399 - links, CTAs, small accent text */ /* ====================== COLORS — Accent / Interactive ====================== */ --color-accent: rgba(16, 185, 129, 1); /* Live Green #10B981 - primary accent */ --color-accent-hover: rgba(52, 211, 153, 1); /* #34D399 - hover state, lighter emerald */ --color-accent-active: rgba(5, 150, 105, 1); /* #059669 - active state, emerald-600 */ --color-accent-subtle: rgba(16, 185, 129, 0.15); /* Live Green @ 15% - subtle backgrounds */ /* ====================== COLORS — CTA / Conversion ====================== */ /* CTA = the accent itself, not a darkened shade — emerald-500 is light enough that near-black text passes AA comfortably (~7.9:1), unlike darker accents that would need white text. */ --color-cta-bg: rgba(16, 185, 129, 1); /* #10B981 Live Green - CTA button background */ --color-cta-bg-hover: rgba(13, 162, 113, 1); /* Darkened #0DA271 - CTA hover background */ --color-cta-text: rgba(10, 10, 10, 1); /* Near-black text on the bright CTA background */ --color-info: #3b82f6; /* informational state — blue (alerts, hover highlights) */ --color-info-subtle: rgba(59, 130, 246, 0.1); --color-info-border: rgba(59, 130, 246, 0.2); /* 2026-08-06: this token used to be named --color-info but held an amber value (#f59e0b) that was actually being used for WARNING states (.alert--warning) — while .alert--info's own background/ border were hardcoded blue, and its color: var(--color-info) was silently pulling in amber instead. Renamed to --color-warning (matching what it actually represents) and gave --color-info its real, correct blue value above — same #3b82f6 admin already uses via --admin-info, for consistency across the two token stacks. */ --color-warning: #f59e0b; /* warning state — amber (alerts, badges) */ --color-warning-subtle: rgba(245, 158, 11, 0.1); --color-warning-border: rgba(245, 158, 11, 0.2); --color-success: #22c55e; /* success state — green (alerts, badges) */ --color-success-subtle: rgba(34, 197, 94, 0.1); --color-success-border: rgba(34, 197, 94, 0.2); --color-danger: #ef4444; /* error/danger state — red (alerts, badges) */ --color-danger-subtle: rgba(239, 68, 68, 0.1); --color-danger-border: rgba(239, 68, 68, 0.2); /* ====================== COLORS — Overlays ====================== */ --color-overlay-dark: rgba(0, 0, 0, 0.92); /* lightbox backdrop, end-screen overlay */ --color-overlay-age-gate: rgba(4, 4, 8, 0.97); /* age gate full-viewport backdrop */ /* ====================== COLORS — White Opacity Variants ====================== */ --color-white-04: rgba(255, 255, 255, 0.04); /* search suggestion divider */ --color-white-08: rgba(255, 255, 255, 0.08); /* age gate card border */ --color-white-10: rgba(255, 255, 255, 0.1); /* spinner track */ --color-white-50: rgba(255, 255, 255, 0.5); /* muted on-dark text (close button) */ --color-white-65: rgba(255, 255, 255, 0.65); /* lightbox counter, photo viewer labels */ --color-white-75: rgba(255, 255, 255, 0.75); /* gallery card count */ --color-white-90: rgba(255, 255, 255, 0.9); /* close button hover */ --color-black-75: rgba(0, 0, 0, 0.75); /* card content overlay gradient */ /* ====================== TYPOGRAPHY — Font Families ====================== */ --font-family-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; --font-family-mono: 'SF Mono', Monaco, Consolas, 'Courier New', monospace; /* ====================== TYPOGRAPHY — Font Sizes ====================== */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* ====================== TYPOGRAPHY — Font Weights ====================== */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* ====================== TYPOGRAPHY — Line Heights ====================== */ --leading-tight: 1.25; --leading-snug: 1.4; --leading-normal: 1.5; --leading-relaxed: 1.625; /* ====================== SPACING ====================== */ --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* ====================== BORDER RADIUS ====================== */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* pill shape - intentional overflow hack */ /* ====================== SIZING ====================== */ --size-focus-ring: 3px; /* focus outline thickness */ --width-container: 1200px; /* max-width for main container */ --width-sidebar: 350px; /* fixed sidebar width */ --width-sidebar-mobile: 100%; /* sidebar width on mobile */ --content-max-width-prose: 680px; /* static page content (privacy, about) */ --content-max-width-modal: 440px; /* age-gate card, modal dialogs */ /* ====================== SHADOWS ====================== */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.6); --shadow-ring-accent: 0 0 0 3px rgba(16, 185, 129, 0.3); /* live green accent ring */ --shadow-modal: 0 32px 64px rgba(0, 0, 0, 0.6); /* age-gate card — large floating modal */ --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.45); /* search dropdown panel */ /* ====================== TRANSITIONS ====================== */ --transition-fast: 0.15s ease; --transition-base: 0.2s ease; --transition-normal: 0.25s ease; --transition-slow: 0.3s ease-out; /* ====================== LAYOUT ====================== */ --header-height: 56px; /* ====================== Z-INDEX SCALE ====================== */ --z-dropdown: 100; --z-header: 200; --z-sidebar: 200; --z-overlay: 300; --z-modal: 400; --z-tooltip: 500; --z-age-gate: 9999; /* full-viewport age verification gate — must be above everything */ }