/* ========================================================================== LiveHoney Frontend — Design Tokens Single source of truth for the entire frontend UI. /css/tokens-theme.css 2026-09-22: Structural token schema shared across the network per project convention, with LiveHoney's OWN accent color substituted in. Accent is "Burnt Honey" #CC7A00 — deliberately a darker, more saturated, more orange-leaning amber, to stay honey-true in name without reading as a copy of the sibling sites' warm accents. 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(204, 122, 0, 1); /* Accent borders on hover — Burnt Honey */ /* ====================== 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 */ /* 2026-09-22: text-accent is a lighter honey than the base accent — #CC7A00 on near-black is ~5.8:1 (fine for badges/large text but murky at username/tag-link size); #E8A33D is ~7:1. Filled surfaces (badges, tabs) keep the base accent — this token is text-only. */ --color-text-accent: rgba(232, 163, 61, 1); /* Light honey #E8A33D - links, CTAs, small accent text */ /* ====================== COLORS — Accent / Interactive ====================== */ --color-accent: rgba(204, 122, 0, 1); /* Burnt Honey #CC7A00 - primary accent */ --color-accent-hover: rgba(224, 143, 26, 1); /* #E08F1A - hover state, lighter burnt honey */ --color-accent-active: rgba(166, 98, 0, 1); /* #A66200 - active state, matches CTA color */ --color-accent-subtle: rgba(204, 122, 0, 0.15); /* Burnt Honey @ 15% - subtle backgrounds */ /* ====================== COLORS — CTA / Conversion ====================== */ --color-cta-bg: rgba(166, 98, 0, 1); /* #A66200 Deep burnt honey - CTA button background */ --color-cta-bg-hover: rgba(140, 82, 0, 1); /* Darkened #A66200 - CTA hover background */ /* 2026-09-22: white, not near-black — the network's near-black CTA rule was designed for LIGHT accents (amber/peach). Burnt Honey is dark enough that it inverts: near-black on #A66200 is ~4.4:1 (fails AA for normal text), white is ~4.9:1 (passes). */ --color-cta-text: rgba(255, 255, 255, 1); /* White text on the dark 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(204, 122, 0, 0.3); /* burnt honey 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 */ }