/* ========================================== Theme CSS - Color Palette & Design Tokens Based on Claude.ai's color scheme ========================================== */ :root { /* ========================================== BACKGROUND PALETTE (Warm Dark Grays) Claude uses warm, slightly yellow-tinted darks ========================================== */ /* Primary background - main page body (warm dark) */ --bg-primary: #2f2f2c; /* Secondary background - cards, panels, surfaces */ --bg-secondary: #252523; /* Tertiary background - elevated elements, inputs */ --bg-tertiary: #1f1e1d; /* Deepest background - sidebar, code blocks */ --bg-deep: #141413; /* Pure black */ --bg-black: #000000; /* Hover state backgrounds */ --bg-hover-subtle: rgba(255, 255, 255, 0.02); --bg-hover-light: rgba(255, 255, 255, 0.04); --bg-hover: rgba(255, 255, 255, 0.06); --bg-hover-strong: rgba(255, 255, 255, 0.10); /* ========================================== TEXT PALETTE (Warm Whites/Creams) Claude uses cream-tinted text for warmth ========================================== */ /* Primary text - headings, body text (warm white/cream) */ --text-primary: #f5f4ef; /* Secondary text - labels, captions */ --text-secondary: #bfbcb4; /* Muted text - placeholders, disabled, hints */ --text-muted: #9a9892; /* Dimmed text - very low emphasis */ --text-dim: #706f6a; /* Inverse text - text on colored backgrounds */ --text-inverse: #ffffff; /* Translucent text (for overlays) */ --text-translucent: rgba(245, 244, 239, 0.85); --text-translucent-muted: rgba(245, 244, 239, 0.65); /* ========================================== ACCENT / BRAND COLORS Claude's signature terracotta/coral orange ========================================== */ /* Primary accent - brand color, links, primary buttons */ --accent-primary: #c6714a; /* Accent hover/active state */ --accent-hover: #d87f5a; /* Accent lighter (for highlights) */ --accent-light: #e69a7a; /* Accent at reduced opacity (for subtle backgrounds) */ --accent-subtle: rgba(198, 113, 74, 0.15); /* Secondary accent - blue (for links, info) */ --accent-secondary: #6ba3c7; --accent-secondary-hover: #7eb5d9; /* ========================================== SEMANTIC COLORS ========================================== */ /* Success - confirmations, positive actions */ --semantic-success: #5ba855; --semantic-success-hover: #4a9144; --semantic-success-subtle: rgba(91, 168, 85, 0.15); /* Error/Danger - errors, destructive actions */ --semantic-error: #d96b6b; --semantic-error-hover: #c45555; --semantic-error-subtle: rgba(217, 107, 107, 0.15); /* Warning/Caution - alerts, pending states */ --semantic-warning: #cc9933; --semantic-warning-hover: #b8872d; --semantic-warning-subtle: rgba(204, 153, 51, 0.15); /* ========================================== STATUS INDICATOR COLORS ========================================== */ --status-online: #5ba855; --status-offline: #d96b6b; --status-unknown: var(--text-muted); /* ========================================== BORDER COLORS Claude uses subtle, warm-tinted borders ========================================== */ /* Default border - cards, inputs, dividers */ --border-default: #3d3d38; /* Subtle borders (for dark surfaces) */ --border-subtle: rgba(255, 255, 255, 0.06); --border-light: rgba(255, 255, 255, 0.10); --border-medium: rgba(255, 255, 255, 0.15); --border-strong: rgba(255, 255, 255, 0.20); /* Focus border */ --border-focus: var(--accent-primary); /* ========================================== OVERLAY COLORS ========================================== */ --overlay-backdrop: rgba(0, 0, 0, 0.70); --overlay-scrim: rgba(0, 0, 0, 0.50); --overlay-button: rgba(0, 0, 0, 0.30); --overlay-button-hover: rgba(0, 0, 0, 0.40); /* ========================================== SHADOW DEFINITIONS Softer shadows for warm theme ========================================== */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25); --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.20); --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.45), 0 4px 8px -2px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 40px -8px rgba(0, 0, 0, 0.50); /* ========================================== NOTE COLORS (Warm Glassmorphism) Adjusted to match warm theme ========================================== */ --note-default: var(--bg-secondary); --note-red: rgba(180, 80, 70, 0.35); --note-orange: rgba(180, 120, 60, 0.35); --note-yellow: rgba(170, 150, 50, 0.35); --note-green: rgba(80, 140, 70, 0.35); --note-teal: rgba(60, 130, 120, 0.35); --note-blue: rgba(80, 130, 160, 0.35); --note-purple: rgba(120, 90, 150, 0.35); --note-pink: rgba(160, 80, 120, 0.35); --note-brown: rgba(130, 100, 70, 0.35); --note-gray: rgba(100, 100, 95, 0.40); /* ========================================== LEGACY VARIABLE ALIASES (Used by existing CSS - kept for compatibility) ========================================== */ --accent: var(--accent-primary); --border: var(--border-default); --success: var(--semantic-success); --error: var(--semantic-error); --warning: var(--semantic-warning); /* Note background aliases */ --note-bg-default: var(--note-default); --note-bg-red: var(--note-red); --note-bg-orange: var(--note-orange); --note-bg-yellow: var(--note-yellow); --note-bg-green: var(--note-green); --note-bg-teal: var(--note-teal); --note-bg-blue: var(--note-blue); --note-bg-purple: var(--note-purple); --note-bg-pink: var(--note-pink); --note-bg-brown: var(--note-brown); --note-bg-gray: var(--note-gray); } /* ========================================== COLOR DOT PALETTE (Color Picker UI) Solid versions of note colors ========================================== */ .color-default { background-color: var(--bg-secondary); } .color-red { background-color: #8b4541; } .color-orange { background-color: #8b6230; } .color-yellow { background-color: #7a7028; } .color-green { background-color: #3d6b35; } .color-teal { background-color: #2d5c55; } .color-blue { background-color: #3d5c6b; } .color-purple { background-color: #5c4570; } .color-pink { background-color: #703d55; } .color-brown { background-color: #5c4530; } .color-gray { background-color: #4a4a47; }