/* ═══════════════════════════════════════════════════════════════════ VALORY THEME SYSTEM — Variable Reference ═══════════════════════════════════════════════════════════════════ This is the contract that every template/component should follow. Migration guide: replace hardcoded colors with these semantic tokens. Both light and dark themes expose the same API — switching is done via the `data-theme` attribute on . BACKGROUNDS --page-bg Page/body background. In light mode this is CREAM, NOT white — cards float above it. In dark mode it is the base navy. Use for , outer wrappers, full- viewport shells. --card-bg Cards, modals, dropdowns, popovers, inputs. Lifted surface. In light mode this is warm linen (not white). --surface-bg Inset/recessed sections, sidebar, secondary panels, grouped content. Dimmer than --card-bg. BORDERS --border-color Default hairline borders on cards and inputs. --border-hover Border on hover/focus states. TEXT --text-primary Headings, body copy — highest contrast. --text-secondary Labels, hints, captions, metadata — mid contrast. --text-muted Placeholders, disabled state — lowest contrast. --text-on-primary Text color to use on top of --primary buttons. BRAND / STATUS --primary Primary brand color (indigo in light, violet in dark). --primary-light Lighter variant for hover, secondary buttons. --primary-gradient Gradient for hero CTAs, primary buttons. --accent Warm accent for streaks, badges, energy indicators. --accent-light Lighter accent for hover/glow. --success / --warning / --danger / --info Semantic status colors. ELEVATION --shadow-sm Subtle elevation (inputs, small chips). --shadow-md Card elevation (momentum cards, list rows). --shadow-lg Modal / dropdown elevation. RADIUS --radius-sm / --radius-md / --radius-lg / --radius-full Palette (light mode): Stone / Ivory + vivid Indigo / Blue + strong Amber page-bg #ECE6DC surface-main #F6F1E8 card-bg #FFF9F2 border #CFC3B4 border-strong #9B8AFB primary #4B35F2 violet #7A3FFF blue #1992FF amber #FF9F0A gold #FFB800 text #121212 / #3E3848 / #6B6473 on-brand #FFFFFF ═══════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════ VALORY DESIGN TOKENS — theme.css Single source of truth for all colors, gradients, and visual tokens. Dark mode = :root (default — preserves existing dark theme) Light mode = [data-theme="light"] ═══════════════════════════════════════════════════════════════════ */ :root { /* ══════════════════════════════════════════════════════════════════ RAW PALETTE — Color Scale (hex) Named after Tailwind CSS equivalents for consistency. ══════════════════════════════════════════════════════════════════ */ /* --- White & Black --- */ --white: #ffffff; --black: #000000; /* --- Slate (cool neutral) --- */ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; /* --- Gray --- */ --gray-300: #d1d5db; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; /* --- Purple --- */ --purple-50: #faf5ff; --purple-400: #c084fc; --purple-500: #a855f7; --purple-950: #3b0764; /* --- Violet --- */ --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-900: #4c1d95; /* --- Fuchsia --- */ --fuchsia-600: #c026d3; --fuchsia-700: #a21caf; /* --- Indigo --- */ --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc; --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4338ca; --indigo-900: #312e81; --indigo-950: #1e1b4b; /* --- Blue --- */ --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd; --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8; --blue-800: #1e40af; --blue-900: #1e3a8a; --blue-950: #172554; /* --- Sky --- */ --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc; --sky-400: #38bdf8; --sky-500: #0ea5e9; /* --- Cyan --- */ --cyan-400: #22d3ee; --cyan-500: #06b6d4; /* --- Teal --- */ --teal-500: #14b8a6; --teal-900: #134e4a; /* --- Emerald --- */ --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-300: #6ee7b7; --emerald-400: #34d399; --emerald-500: #10b981; --emerald-600: #059669; --emerald-800: #065f46; /* --- Green --- */ --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; /* --- Amber --- */ --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-800: #92400e; --amber-900: #78350f; /* --- Yellow --- */ --yellow-400: #facc15; /* --- Orange --- */ --orange-200: #fed7aa; --orange-500: #f97316; --orange-800: #9a3412; /* --- Red --- */ --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; /* --- Rose --- */ --rose-200: #fecdd3; /* --- Pink --- */ --pink-400: #f472b6; --pink-500: #ec4899; /* --- Tier / Badge custom colors --- */ --bronze: #b87333; --bronze-dk: #8c5a2b; --bronze-deep: #4a2f19; --bronze-lt: #cd7f32; --bronze-gold: #ffd27f; --tier-1-fg: #ffe9f7; --tier-2-fg: #e6fffa; --tier-3-fg: #fff7e6; /* --- Custom one-off colors used in the project --- */ --text-light-blue: #e8edf8; /* calendar heading text */ --text-blue-white: #f8fbff; /* auth/button near-white */ --text-blue-tint: #eef3ff; /* auth text */ --text-violet-soft: #f0edff; /* calendar active, light violet */ --text-study: #f0f4ff; /* study session text */ --text-indigo-light: #cbd5f5; /* chat / search text variant */ --text-violet-wash: #e0d9ff; /* study session hover text */ --text-cool-blue: #eef6ff; /* auth button text */ --text-indigo-white: #eef2ff; /* avatar cropper dialog text */ --text-ss-btn: #eef0ff; /* study session button text */ --text-mint: #f0fff4; /* study session complete text */ --text-deep-navy: #0b1224; /* parent avatar dark text */ --text-deep-teal: #04101b; /* edit toggle dark text */ --text-soft-blue: #e7f3ff; /* file upload text */ --text-ice-blue: #dbe4ff; /* role secondary text */ --text-pale-blue: #e0e7ff; /* step text, same as indigo-100 */ --bg-diary: #1c1c2e; /* diary page bg */ --bg-threads: #232149; /* threads list bg */ --purple-diary: #8a2be2; /* diary accent */ --badge-fallback-bg: #222; /* .mn-badge default bg */ --badge-fallback-fg: #eee; /* .mn-badge default fg */ /* ══════════════════════════════════════════════════════════════════ RGB TRIPLETS — For rgba() composition Usage: color-mix(in srgb, var(--violet-500) 12%, transparent) ══════════════════════════════════════════════════════════════════ */ --white-rgb: 255, 255, 255; --black-rgb: 0, 0, 0; /* Slate */ --slate-200-rgb: 226, 232, 240; --slate-300-rgb: 203, 213, 225; --slate-400-rgb: 148, 163, 184; --slate-800-rgb: 30, 41, 59; --slate-900-rgb: 15, 23, 42; /* Gray */ --gray-800-rgb: 31, 41, 55; /* Violet / Purple */ --violet-300-rgb: 196, 181, 253; --violet-400-rgb: 167, 139, 250; --violet-500-rgb: 139, 92, 246; --violet-600-rgb: 124, 58, 237; /* Indigo */ --indigo-200-rgb: 199, 210, 254; --indigo-400-rgb: 129, 140, 248; --indigo-500-rgb: 99, 102, 241; /* Blue */ --blue-200-rgb: 191, 219, 254; --blue-300-rgb: 147, 197, 253; --blue-400-rgb: 96, 165, 250; --blue-500-rgb: 59, 130, 246; --blue-600-rgb: 37, 99, 235; --blue-800-rgb: 30, 64, 175; /* Sky */ --sky-200-rgb: 186, 230, 253; --sky-300-rgb: 125, 211, 252; --sky-400-rgb: 56, 189, 248; --sky-500-rgb: 14, 165, 233; /* Cyan */ --cyan-400-rgb: 34, 211, 238; /* Emerald / Green */ --emerald-300-rgb: 110, 231, 183; --emerald-500-rgb: 16, 185, 129; --green-500-rgb: 34, 197, 94; --green-600-rgb: 22, 163, 74; /* Amber / Yellow */ --amber-400-rgb: 251, 191, 36; --amber-500-rgb: 245, 158, 11; --yellow-400-rgb: 250, 204, 21; /* Red */ --red-400-rgb: 248, 113, 113; --red-500-rgb: 239, 68, 68; --red-800-rgb: 153, 27, 27; /* Pink */ --pink-500-rgb: 236, 72, 153; /* Misc */ --bronze-rgb: 205, 127, 50; --bronze-gold-rgb: 255, 210, 127; --dark-overlay-rgb: 2, 6, 23; --app-surface-rgb: 12, 18, 30; /* mobile app topbar surface */ --deep-navy-rgb: 3, 7, 18; /* mobile app shadow tone */ --cropper-bg-1-rgb: 12, 20, 43; /* avatar cropper dialog bg */ --cropper-bg-2-rgb: 11, 30, 58; /* avatar cropper dialog bg alt */ --cropper-backdrop-rgb: 1, 7, 19; /* avatar cropper backdrop */ --cropper-shadow-rgb: 2, 8, 23; /* avatar cropper drop shadow */ /* Calendar-specific dark palette */ --cal-bg-0-rgb: 8, 10, 24; /* calendar surface base */ --cal-bg-1-rgb: 12, 16, 34; /* calendar surface layer 1 */ --cal-bg-2-rgb: 16, 20, 42; /* calendar surface layer 2 */ --cal-bg-header-rgb: 14, 18, 38; /* calendar header bg */ --cal-bg-btn-rgb: 15, 18, 36; /* calendar button group */ --cal-bg-deep-rgb: 8, 12, 26; /* calendar scrollgrid bottom */ --cal-bg-hover-rgb: 20, 24, 50; /* calendar day hover */ --cal-bg-axis-rgb: 10, 14, 28; /* calendar timegrid axis */ --cal-bg-col-rgb: 10, 14, 30; /* calendar timegrid col */ --cal-bg-col-hover-rgb: 18, 22, 46; /* calendar col hover top */ /* Study session (ss-*) custom RGB triplets */ --ss-surface-rgb: 16, 24, 44; /* ss card/surface base */ --ss-surface-strong-rgb: 12, 21, 42; /* ss card/surface strong */ --ss-card-bg1-rgb: 30, 27, 60; /* ss card gradient stop 1 */ --ss-card-bg2-rgb: 14, 22, 42; /* ss card gradient stop 2 */ --ss-input-bg-rgb: 8, 13, 28; /* ss input bg */ --ss-shell-bg1-rgb: 22, 18, 52; /* ss session shell stop 1 */ --ss-shell-bg2-rgb: 10, 16, 34; /* ss session shell stop 2 */ --ss-resources-bg-rgb: 28, 24, 56; /* ss resources panel stop */ --ss-quote-bg-rgb: 8, 14, 30; /* ss quote/reflection bg */ --ss-cta-break-bg-rgb: 9, 16, 36; /* ss cta-break padding layer */ /* Onboarding tour custom RGB triplets */ --tour-completion-bg-rgb: 7, 32, 18; /* onboarding completion card bg */ /* Auth page surface / input RGB triplets */ --auth-input-bg-rgb: 8, 16, 32; /* auth input field bg */ --auth-surface-a-rgb: 12, 22, 44; /* auth wash surface a */ --auth-surface-b-rgb: 10, 18, 36; /* auth wash surface b */ --auth-surface-wash-rgb: 22, 32, 58; /* auth hover wash */ --auth-hero-b-rgb: 20, 30, 60; /* parent-hero gradient stop b */ --auth-edit-shadow-rgb: 4, 7, 20; /* edit card shadow */ --text-blue-white-rgb: 248, 251, 255; /* --text-blue-white as triplet */ --lm-purple-rgb: 91, 81, 121; /* light-mode purple-gray base */ /* Derived color tokens from RGB triplets (consumed by component CSS) */ --dark-overlay: rgb(var(--dark-overlay-rgb)); --ss-surface: rgb(var(--ss-surface-rgb)); --ss-surface-strong: rgb(var(--ss-surface-strong-rgb)); --ss-card-bg1: rgb(var(--ss-card-bg1-rgb)); --ss-card-bg2: rgb(var(--ss-card-bg2-rgb)); --ss-input-bg: rgb(var(--ss-input-bg-rgb)); --ss-shell-bg1: rgb(var(--ss-shell-bg1-rgb)); --ss-shell-bg2: rgb(var(--ss-shell-bg2-rgb)); --ss-resources-bg: rgb(var(--ss-resources-bg-rgb)); --ss-quote-bg: rgb(var(--ss-quote-bg-rgb)); --ss-cta-break-bg: rgb(var(--ss-cta-break-bg-rgb)); --auth-input-bg: rgb(var(--auth-input-bg-rgb)); --auth-surface-a: rgb(var(--auth-surface-a-rgb)); --auth-surface-b: rgb(var(--auth-surface-b-rgb)); --auth-surface-wash: rgb(var(--auth-surface-wash-rgb)); --auth-hero-b: rgb(var(--auth-hero-b-rgb)); --auth-edit-shadow: rgb(var(--auth-edit-shadow-rgb)); /* ══════════════════════════════════════════════════════════════════ SEMANTIC DESIGN TOKENS ══════════════════════════════════════════════════════════════════ */ /* ── Backgrounds ── */ --bg-base: #0f172a; --bg-surface: #1e293b; --bg-card: #1e1b4b; --bg-card-alt: #111827; --bg-input: #0b1220; --bg-hover: color-mix(in srgb, var(--white) 4%, transparent); --bg-active: color-mix(in srgb, var(--white) 7%, transparent); /* ── Borders ── */ --border-subtle: color-mix(in srgb, var(--white) 6%, transparent); --border-default: color-mix(in srgb, var(--white) 10%, transparent); --border-strong: color-mix(in srgb, var(--white) 18%, transparent); /* ── Text ── */ --text-primary: #f8fafc; --text-secondary: #e2e8f0; --text-muted: #94a3b8; /* ── Brand Accent ── */ --accent-purple: #8b5cf6; --accent-purple-dk: #7c3aed; --accent-purple-dkr: #6d28d9; --accent-purple-lt: #a78bfa; --accent-blue: #3b82f6; --accent-blue-dk: #2563eb; --accent-blue-lt: color-mix(in srgb, var(--blue-500) 15%, transparent); --accent-sky: #38bdf8; --accent-cyan: #22d3ee; --accent-indigo: #6366f1; /* ── Theme API parity (dark defaults) ── */ --page-bg: var(--bg-base); --surface-main: var(--bg-surface); --card-bg: var(--bg-card); --surface-bg: var(--bg-surface); --surface-violet: color-mix(in srgb, var(--accent-purple) 16%, var(--bg-card)); --surface-blue: color-mix(in srgb, var(--accent-blue) 14%, var(--bg-card)); --surface-amber: color-mix(in srgb, var(--amber-500) 16%, var(--bg-card)); --border-color: var(--border-default); --border-hover: var(--border-strong); --border-dark: color-mix(in srgb, #000 30%, transparent); --text-on-brand: #ffffff; --text-on-primary: #f8fbff; --text-on-accent: #0f172a; --primary: var(--accent-purple-dk); --primary-hover: var(--accent-purple-dkr); --primary-deep: var(--violet-900); --primary-light: var(--accent-purple-lt); --violet: var(--accent-purple); --blue: var(--accent-blue); --cyan: var(--accent-cyan); --amber: var(--amber-500); --amber-deep: var(--amber-600); --gold: var(--amber-400); --orange: var(--orange-500); --accent: var(--amber); --accent-light: var(--gold); --success: #22c55e; --danger: var(--color-danger); --warning: var(--color-warning); --info: var(--color-info); --brand-gradient: linear-gradient(135deg, #4c1d95 0%, #7c3aed 52%, #3b82f6 100%); --primary-gradient: var(--brand-gradient); --accent-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 52%, #f97316 100%); --violet-surface-gradient: linear-gradient(180deg, color-mix(in srgb, var(--violet) 18%, var(--bg-card)) 0%, color-mix(in srgb, var(--violet) 12%, var(--bg-card)) 100%); --blue-surface-gradient: linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, var(--bg-card)) 0%, color-mix(in srgb, var(--blue) 12%, var(--bg-card)) 100%); --amber-surface-gradient: linear-gradient(180deg, color-mix(in srgb, var(--amber) 18%, var(--bg-card)) 0%, color-mix(in srgb, var(--amber) 12%, var(--bg-card)) 100%); /* ── Social / Chat lane (dark defaults) ── */ --surface-violet-2: color-mix(in srgb, var(--accent-purple) 26%, var(--bg-card)); --surface-blue-soft: color-mix(in srgb, var(--accent-blue) 24%, var(--bg-card)); --surface-chat: color-mix(in srgb, var(--accent-purple) 20%, var(--bg-card)); --surface-mint: color-mix(in srgb, var(--emerald-400) 16%, var(--bg-card)); --border-soft: var(--border-subtle); --border-violet: color-mix(in srgb, var(--accent-purple) 48%, transparent); --border-mint: color-mix(in srgb, var(--emerald-400) 44%, transparent); --border-amber: color-mix(in srgb, var(--amber-500) 44%, transparent); --blue-accent: var(--accent-blue); --mint: var(--emerald-500); --mint-deep: var(--emerald-600); --chat-bubble-outgoing: var(--primary-gradient); --soft-violet-panel: var(--violet-surface-gradient); --soft-mint-panel: linear-gradient(180deg, color-mix(in srgb, var(--mint) 16%, var(--bg-card)) 0%, color-mix(in srgb, var(--mint) 10%, var(--bg-card)) 100%); --soft-amber-panel: var(--amber-surface-gradient); --social-shell-bg: var(--bg-surface); --social-panel-bg: color-mix(in srgb, var(--accent-purple) 18%, var(--bg-card)); --social-card-bg: color-mix(in srgb, var(--card-bg) 98%, transparent); --social-card-bg-alt: color-mix(in srgb, var(--accent-purple) 14%, var(--card-bg)); --chat-surface-bg: color-mix(in srgb, var(--accent-purple) 16%, var(--bg-card)); --chat-bubble-incoming-bg: color-mix(in srgb, var(--accent-purple) 22%, var(--bg-card)); --circle-sidebar-bg: color-mix(in srgb, var(--card-bg) 98%, transparent); --circle-chat-bg: color-mix(in srgb, var(--accent-purple) 18%, var(--bg-card)); --circle-card-bg: color-mix(in srgb, var(--card-bg) 98%, transparent); --profile-shell-bg: color-mix(in srgb, var(--accent-purple) 16%, var(--bg-surface)); --profile-card-bg: var(--card-bg); --profile-card-violet: color-mix(in srgb, var(--accent-purple) 14%, var(--card-bg)); --profile-card-mint: color-mix(in srgb, var(--mint) 14%, var(--card-bg)); --profile-card-amber: color-mix(in srgb, var(--amber) 16%, var(--card-bg)); --profile-panel-border: var(--border-default); --profile-panel-shadow: var(--shadow-md); --request-form-shell-bg: color-mix(in srgb, var(--accent-purple) 15%, var(--bg-surface)); --request-form-input-bg: color-mix(in srgb, var(--card-bg) 84%, var(--bg-surface)); /* ── Semantic Status Colors ── */ --color-success: #22c55e; --color-success-alt: #10b981; --color-warning: #f59e0b; --color-danger: #ef4444; --color-danger-dk: #dc2626; --color-info: #0ea5e9; /* ── Gradients ── */ --grad-body: linear-gradient(135deg, #0f172a, #1e1b4b, #3b0764); --grad-cta: var(--primary-gradient); --grad-accent: linear-gradient(90deg, var(--violet), var(--blue)); --grad-hero: var(--brand-gradient); /* ── Tier badge gradients ── */ --grad-tier-1: linear-gradient(135deg, #6d28d9, #a21caf, #ec4899); --grad-tier-2: linear-gradient(135deg, #064e3b, #059669, #22c55e); --grad-tier-3: linear-gradient(135deg, #4a2f19, #b87333, #ffd27f); --grad-name-t1: linear-gradient(45deg, #7c3aed 0%, #c026d3 40%, #ec4899 70%, #f472b6 100%); --grad-name-t2: linear-gradient(45deg, #10b981 0%, #22c55e 60%, #34d399 100%); --grad-name-t3: linear-gradient(45deg, #8c5a2b 0%, #cd7f32 35%, #b87333 70%, #ffd27f 100%); /* ── Auth Page Tokens ── */ --auth-surface: rgba(12, 23, 44, 0.62); --auth-surface-strong: rgba(14, 26, 52, 0.7); --auth-surface-soft: rgba(10, 18, 36, 0.52); --auth-border: color-mix(in srgb, var(--slate-400) 28%, transparent); --auth-border-soft: color-mix(in srgb, var(--slate-400) 18%, transparent); --auth-text: #eef3ff; --auth-text-muted: rgba(214, 224, 242, 0.82); --auth-text-subtle: rgba(179, 196, 222, 0.74); --auth-accent: var(--accent-sky); --auth-accent-strong: var(--accent-blue-dk); --auth-accent-2: var(--accent-purple); --auth-success: var(--emerald-400); --auth-warning: var(--amber-400); --auth-danger: var(--red-400); --auth-shadow: 0 18px 38px color-mix(in srgb, var(--dark-overlay) 38%, transparent); /* ── Radius ── */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ── Sidebar ── */ --sidebar-width: 64px; /* ── Shadows ── */ --shadow-sm: 0 4px 10px rgba(2, 6, 23, 0.24); --shadow-md: 0 14px 30px rgba(2, 6, 23, 0.38); --shadow-lg: 0 24px 52px rgba(2, 6, 23, 0.46); --shadow-card: var(--shadow-md); } /* ═══════════════════════════════════════════════════════════════════ LIGHT MODE — Token Overrides Activated by: Palette: stone + ivory + saturated indigo/blue + strong amber ═══════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* Core surfaces */ --page-bg: #ECE6DC; --surface-main: #F6F1E8; --card-bg: #FFF9F2; --surface-bg: var(--surface-main); --surface-violet: #EEE8FF; --surface-blue: #EAF2FF; --surface-amber: #FFF1D6; /* Borders */ --border-color: #CFC3B4; --border-strong: #9B8AFB; --border-dark: #8D7C6B; --border-hover: color-mix(in srgb, var(--border-strong) 46%, var(--border-color)); --border-subtle: color-mix(in srgb, var(--border-color) 70%, transparent); --border-default: var(--border-color); /* Text */ --text-primary: #121212; --text-secondary: #3E3848; --text-muted: #6B6473; --text-on-brand: #FFFFFF; --text-on-primary: #FFFFFF; --text-on-accent: #121212; /* Brand colors */ --primary: #4B35F2; --primary-hover: #3923DB; --primary-deep: #24108F; --primary-light: #7A3FFF; --violet: #7A3FFF; --blue: #1992FF; --cyan: #00C2FF; /* Reward / productivity lane */ --amber: #FF9F0A; --amber-deep: #E07A00; --gold: #FFB800; --orange: #FF7A00; --accent: var(--amber); --accent-light: var(--gold); /* State colors */ --success: #00A86B; --danger: #D92D20; --warning: var(--amber); --info: var(--blue); /* Gradients */ --brand-gradient: linear-gradient(135deg, #3923DB 0%, #7A3FFF 52%, #1992FF 100%); --primary-gradient: var(--brand-gradient); --accent-gradient: linear-gradient(135deg, #FF9F0A 0%, #FFB800 52%, #FF7A00 100%); --violet-surface-gradient: linear-gradient(180deg, #F3EEFF 0%, #EAE2FF 100%); --blue-surface-gradient: linear-gradient(180deg, #EEF6FF 0%, #E0EEFF 100%); --amber-surface-gradient: linear-gradient(180deg, #FFF3D9 0%, #FFE7B0 100%); /* Social / chat light tokens */ --surface-violet-2: #E8DCFF; --surface-blue-soft: #EAF2FF; --surface-chat: #F5EEFF; --surface-mint: #EAF8F1; --border-soft: #DED3C7; --border-violet: #B39DFF; --border-mint: #9ED8B5; --border-amber: #F0C36A; --blue-accent: #1992FF; --mint: #19B36B; --mint-deep: #0B8F52; --chat-bubble-outgoing: linear-gradient(135deg, #5A30F5 0%, #7A3FFF 55%, #2D8CFF 100%); --soft-violet-panel: linear-gradient(180deg, #F4ECFF 0%, #E9DEFF 100%); --soft-mint-panel: linear-gradient(180deg, #EFFBF4 0%, #E1F5EA 100%); --soft-amber-panel: linear-gradient(180deg, #FFF4DD 0%, #FFE8BA 100%); --social-shell-bg: #F6F1E8; --social-panel-bg: #F1E8FF; --social-card-bg: #FFF9F2; --social-card-bg-alt: #F5EEFF; --chat-surface-bg: #F5EEFF; --chat-bubble-incoming-bg: #F1E8FF; --circle-sidebar-bg: #FFF9F2; --circle-chat-bg: #F5EEFF; --circle-card-bg: #FFF9F2; --profile-shell-bg: linear-gradient(165deg, #F8F2E9 0%, #F2E8DA 100%); --profile-card-bg: #FFF9F2; --profile-card-violet: linear-gradient(180deg, #F4ECFF 0%, #E9DEFF 100%); --profile-card-mint: linear-gradient(180deg, #EFFBF4 0%, #E1F5EA 100%); --profile-card-amber: linear-gradient(180deg, #FFF4DD 0%, #FFE8BA 100%); --profile-panel-border: #CFC3B4; --profile-panel-shadow: 0 10px 24px rgba(57, 35, 219, 0.12); --request-form-shell-bg: linear-gradient(170deg, #F4ECFF 0%, #EEE5FF 52%, #EAF2FF 100%); --request-form-input-bg: color-mix(in srgb, var(--card-bg) 76%, var(--surface-violet)); /* Elevation */ --shadow-sm: 0 4px 10px rgba(18, 18, 18, 0.06); --shadow-md: 0 10px 24px rgba(57, 35, 219, 0.14); --shadow-lg: 0 18px 40px rgba(25, 146, 255, 0.14); --shadow-card: var(--shadow-md); /* Legacy semantic surfaces */ --bg-base: var(--page-bg); --bg-surface: var(--surface-main); --bg-card: var(--card-bg); --bg-card-alt: var(--surface-main); --bg-input: var(--surface-main); --bg-hover: color-mix(in srgb, var(--primary) 8%, transparent); --bg-active: color-mix(in srgb, var(--primary) 14%, transparent); /* Legacy brand aliases still used across templates/components */ --accent-purple: var(--violet); --accent-purple-lt: var(--border-strong); --accent-purple-dk: var(--primary-hover); --accent-purple-dkr: var(--primary-deep); --accent-blue: var(--blue); --accent-blue-dk: #0D74D6; --accent-blue-lt: color-mix(in srgb, var(--blue) 24%, transparent); --accent-sky: var(--cyan); --accent-cyan: var(--cyan); --accent-indigo: var(--primary); /* Legacy semantic aliases */ --color-success: var(--success); --color-success-alt: #0BC07A; --color-warning: var(--warning); --color-danger: var(--danger); --color-danger-dk: #B42318; --color-info: var(--info); /* Legacy gradient aliases */ --grad-cta: var(--brand-gradient); --grad-accent: linear-gradient(90deg, var(--violet), var(--blue)); --grad-hero: var(--brand-gradient); --grad-body: var(--page-bg); /* Study session helper tokens */ --ss-surface: var(--card-bg); --ss-surface-strong: var(--surface-main); --ss-card-bg1: var(--surface-violet); --ss-card-bg2: var(--surface-blue); --ss-input-bg: var(--surface-main); --ss-shell-bg1: var(--surface-violet); --ss-shell-bg2: var(--surface-blue); --ss-resources-bg: var(--surface-main); --ss-quote-bg: var(--surface-main); --ss-cta-break-bg: var(--surface-main); /* Auth helper/raw tokens */ --auth-input-bg: var(--surface-main); --auth-surface-a: var(--card-bg); --auth-surface-b: var(--surface-main); --auth-surface-wash: color-mix(in srgb, var(--violet) 12%, transparent); --auth-hero-b: var(--surface-blue); --auth-edit-shadow: color-mix(in srgb, var(--primary) 16%, transparent); /* Auth semantic tokens */ --auth-surface: var(--card-bg); --auth-surface-strong: var(--card-bg); --auth-surface-soft: var(--surface-main); --auth-border: var(--border-color); --auth-border-soft: color-mix(in srgb, var(--border-color) 78%, transparent); --auth-text: var(--text-primary); --auth-text-muted: var(--text-secondary); --auth-text-subtle: var(--text-muted); --auth-accent: var(--primary); --auth-accent-strong: var(--blue); --auth-accent-2: var(--accent-purple); --auth-success: var(--success); --auth-warning: var(--amber); --auth-danger: var(--danger); --auth-shadow: var(--shadow-lg); /* RGB helper parity in light mode */ --dark-overlay-rgb: 18, 18, 18; --dark-overlay: rgb(var(--dark-overlay-rgb)); --lm-purple-rgb: 122, 63, 255; --auth-input-bg-rgb: 246, 241, 232; --auth-surface-a-rgb: 255, 249, 242; --auth-surface-b-rgb: 246, 241, 232; --auth-surface-wash-rgb: 238, 232, 255; --auth-hero-b-rgb: 234, 242, 255; --auth-edit-shadow-rgb: 57, 35, 219; }