/** * ReadAgora Theme — aligned with here/ design (StoryHub-style). * Single source for colors, typography, radii. Tailwind uses js/tailwind-config.js (vars). */ :root { /* Brand & UI (here: primary orange/coral) */ --primary: #ff6933; --primary-rgb: 255, 105, 51; --premium: #8e44ad; --teal-brand: #14b8a6; --accent-orange: #ff6b00; /* Light mode (here: warm off-white) */ --background-light: #f7f6f8; /* Dark mode (here: deep black + cards) — used when .dark is on */ --background-dark: #0d0d0d; --card-dark: #151515; --surface-dark: #1a1a1a; --surface-dark-alt: #23140f; --surface-dark-light: #2d1b15; --neutral-dark: #1a1022; --neutral-card: #151515; --neutral-dark-reader: #1a1311; /* Typography (here: Plus Jakarta Sans) */ --font-display: "Plus Jakarta Sans", sans-serif; --font-serif: "Playfair Display", serif; --font-reader: "Lora", serif; /* Border radius (here: 0.25 / 0.5 / 0.75 / full) */ --radius: 0.25rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; /* Shadows */ --shadow-story-card: 0 4px 20px -2px rgba(0, 0, 0, 0.5); /* Layout */ --reading-container-max-width: 720px; /* Text */ --text-inverse: #f5f5f5; /* Effects */ --hero-blur-bg: rgba(13, 13, 13, 0.7); --scrollbar-track: #0d0d0d; --scrollbar-thumb: #2a2a2a; --scrollbar-thumb-hover: #3a3a3a; --primary-glow: rgba(var(--primary-rgb), 0.5); --primary-glow-soft: rgba(var(--primary-rgb), 0.3); /* Gradients */ --gradient-card-from: #2d1b36; --gradient-card-to: #1a1a1a; /* Borders (consistent with here/) */ --border-subtle: rgba(255, 255, 255, 0.05); --border-primary-subtle: rgba(var(--primary-rgb), 0.1); --border-primary-strong: rgba(var(--primary-rgb), 0.3); } /* Accent: Teal → Emerald → Green (from-teal-600 via-emerald-600 to-green-500) */ html.accent-teal-green { --primary: #059669; --primary-rgb: 5, 150, 105; --accent-gradient: linear-gradient(to right, #0d9488, #059669, #22c55e); } html.accent-teal-green .bg-primary { background: var(--accent-gradient) !important; } .dark { --scrollbar-track: #0d0d0d; --scrollbar-thumb: #2a2a2a; --scrollbar-thumb-hover: #3a3a3a; } .dark .custom-scrollbar::-webkit-scrollbar-track { background: var(--scrollbar-track); } .dark .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }