/* ============================================================ OBSIDIAN CONSOLE — Design System Dual-theme: Dark "Obsidian" + Light "Editorial" Theme controlled via [data-theme="dark"|"light"] on ============================================================ */ /* ── Dark Theme Tokens (default / :root) ───────────────────── */ :root { /* Backgrounds */ --bg: #080810; --surface: #0f0f18; --surface-2: #13131e; --surface-3: #181826; /* Borders */ --border: rgba(255, 255, 255, 0.06); --border-md: rgba(255, 255, 255, 0.10); --border-hi: rgba(251, 191, 36, 0.45); /* Text */ --text: #e2e8f0; --text-muted: #64748b; --text-dim: #374151; /* Accents */ --amber: #fbbf24; --amber-soft: #f59e0b; --amber-dim: rgba(251, 191, 36, 0.10); --amber-glow: rgba(251, 191, 36, 0.20); --indigo: #818cf8; --indigo-dim: rgba(129, 140, 248, 0.12); --green: #34d399; --green-dim: rgba(52, 211, 153, 0.10); --red: #f87171; --red-dim: rgba(248, 113, 113, 0.10); /* Layout */ --radius: 12px; --radius-lg: 18px; --nav-height: 64px; } /* ── Light Theme Tokens ─────────────────────────────────────── */ [data-theme="light"] { /* Backgrounds — beige chaud éditorial */ --bg: #faf9f7; --surface: #ffffff; --surface-2: #f4f3f0; --surface-3: #ece9e3; /* Borders */ --border: rgba(0, 0, 0, 0.07); --border-md: rgba(0, 0, 0, 0.11); --border-hi: rgba(217, 119, 6, 0.50); /* Text */ --text: #1a1917; --text-muted: #6b7280; --text-dim: #9ca3af; /* Accents — amber foncé pour lisibilité sur fond clair */ --amber: #d97706; --amber-soft: #b45309; --amber-dim: rgba(217, 119, 6, 0.09); --amber-glow: rgba(217, 119, 6, 0.16); /* Indigo foncé sur fond clair */ --indigo: #4f46e5; --indigo-dim: rgba(79, 70, 229, 0.10); --green: #059669; --green-dim: rgba(5, 150, 105, 0.09); --red: #dc2626; --red-dim: rgba(220, 38, 38, 0.09); } /* ── Reset & Body ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { background-color: var(--bg); background-image: radial-gradient(ellipse 90% 40% at 50% -5%, rgba(129, 140, 248, 0.07) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 85% 90%, rgba(251, 191, 36, 0.04) 0%, transparent 60%); color: var(--text); font-family: 'Inter', 'DM Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; transition: background-color 0.25s ease, color 0.25s ease; } [data-theme="light"] body { background-image: radial-gradient(ellipse 90% 40% at 50% -5%, rgba(79, 70, 229, 0.04) 0%, transparent 70%); } /* ── Typography ────────────────────────────────────────────── */ .font-display { font-family: 'Space Grotesk', 'DM Sans', sans-serif; } .font-mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; } h1, h2, h3 { font-family: 'Space Grotesk', 'DM Sans', sans-serif; letter-spacing: -0.02em; } /* ── Cards ─────────────────────────────────────────────────── */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 0.18s ease, background 0.25s ease; } .card:hover { border-color: var(--border-hi); } /* Alias — keeps old templates working */ .glass-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.25s ease; } .glass-card:hover { border-color: var(--border-hi); box-shadow: 0 0 0 1px var(--amber-glow); transform: none; } /* Raised card variant */ .card-raised { background: var(--surface-2); border: 1px solid var(--border-md); border-radius: var(--radius); } /* ── Navbar / Glass ────────────────────────────────────────── */ .glass { background: var(--bg); border-color: var(--border); box-shadow: none; backdrop-filter: none; } nav.glass { background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: none; } /* ── Theme Switcher ────────────────────────────────────────── */ .theme-switcher { display: flex; gap: 2px; padding: 4px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border); flex-shrink: 0; transition: background 0.25s ease, border-color 0.25s ease; } .theme-btn { width: 30px; height: 26px; border-radius: 6px; border: none; background: transparent; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, box-shadow 0.15s; color: var(--text-muted); line-height: 1; } .theme-btn:hover { background: var(--surface); } .theme-btn.active { background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); color: var(--text); } [data-theme="light"] .theme-btn.active { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } /* ── Badges ────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; white-space: nowrap; } .badge-green { background: var(--green-dim); color: var(--green); border-color: rgba(52,211,153,0.18); } .badge-amber { background: var(--amber-dim); color: var(--amber); border-color: rgba(217,119,6,0.2); } .badge-red { background: var(--red-dim); color: var(--red); border-color: rgba(220,38,38,0.18); } .badge-indigo { background: var(--indigo-dim); color: var(--indigo); border-color: rgba(99,102,241,0.2); } .badge-gray { background: rgba(100,116,139,0.10); color: var(--text-muted); border-color: rgba(100,116,139,0.15); } /* ── Buttons ───────────────────────────────────────────────── */ .btn-primary, .btn-premium { display: inline-flex; align-items: center; gap: 6px; background: var(--amber); color: #09090f; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.01em; padding: 9px 18px; border-radius: 9px; border: none; cursor: pointer; transition: opacity 0.15s, transform 0.1s, box-shadow 0.15s; text-decoration: none; white-space: nowrap; } .btn-primary:hover, .btn-premium:hover { opacity: 0.88; box-shadow: 0 4px 16px var(--amber-glow); transform: translateY(-1px); } .btn-primary:active, .btn-premium:active { transform: scale(0.97); } .btn-ghost { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--border-md); color: var(--text-muted); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; text-decoration: none; white-space: nowrap; } .btn-ghost:hover { border-color: var(--border-hi); color: var(--text); background: var(--surface-2); } .btn-danger { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(220,38,38,0.25); color: var(--red); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 9px; cursor: pointer; transition: background 0.15s, border-color 0.15s; text-decoration: none; } .btn-danger:hover { background: var(--red-dim); border-color: rgba(220,38,38,0.4); } /* ── Form Elements ─────────────────────────────────────────── */ .form-input, .form-textarea, .form-select { background: var(--surface-2); border: 1px solid var(--border-md); border-radius: 9px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 13px; padding: 9px 13px; width: 100%; transition: border-color 0.15s, box-shadow 0.15s, background 0.25s; outline: none; appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--text-dim); } .form-input:focus, .form-textarea:focus, .form-select:focus { border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); } .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 36px; cursor: pointer; } .form-checkbox { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; } .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; } /* ── Stat Numbers ──────────────────────────────────────────── */ .stat-num { font-family: 'JetBrains Mono', monospace; font-size: 2.25rem; font-weight: 700; color: var(--amber); letter-spacing: -0.04em; line-height: 1; } .stat-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: 4px; } /* ── Code Blocks ───────────────────────────────────────────── */ .code-block { background: #070710; border: 1px solid var(--border-md); border-radius: var(--radius); font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7; color: #94a3b8; padding: 16px 20px; overflow-x: auto; white-space: normal; transition: background 0.25s ease; } /* pre-based code blocks keep whitespace */ pre.code-block, .code-block pre, .code-block.whitespace-pre { white-space: pre; } [data-theme="light"] .code-block { background: #f8f7f5; border-color: rgba(0, 0, 0, 0.09); color: #374151; } .code-block .c-amber { color: var(--amber); } .code-block .c-green { color: var(--green); } .code-block .c-indigo { color: var(--indigo); } .code-block .c-muted { color: var(--text-dim); } /* ── Pulse Status Dot ──────────────────────────────────────── */ .pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.5); animation: pulse-ring 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; flex-shrink: 0; } .pulse-dot-amber { background: var(--amber); box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); animation: pulse-ring-amber 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); } 70% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } @keyframes pulse-ring-amber { 0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); } 70% { box-shadow: 0 0 0 5px rgba(251, 191, 36, 0); } 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); } } /* ── Dividers ──────────────────────────────────────────────── */ hr, .divider { border: none; border-top: 1px solid var(--border); margin: 0; } /* ── Flash / Toast Messages ────────────────────────────────── */ @keyframes flash-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .flash-msg { animation: flash-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); } /* ── Text Utilities ────────────────────────────────────────── */ .text-gradient { background: linear-gradient(135deg, var(--amber) 0%, #fb923c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ── Scrollbar ─────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-md); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover{ background: rgba(128,128,128,0.3); } /* ── Nav Active Indicator ──────────────────────────────────── */ .nav-active { color: var(--amber) !important; position: relative; } .nav-active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--amber); border-radius: 1px; } /* ── Animate slide up ──────────────────────────────────────── */ @keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .animate-slide-up { animation: slide-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); } /* ── Chat Bubbles ──────────────────────────────────────────── */ .bubble-user { background: rgba(251, 191, 36, 0.07); border: 1px solid rgba(251, 191, 36, 0.12); border-radius: 16px 4px 16px 16px; } .bubble-ai { background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px 16px 16px 16px; } [data-theme="light"] .bubble-user { background: rgba(217, 119, 6, 0.07); border-color: rgba(217, 119, 6, 0.12); } [data-theme="light"] .bubble-ai { background: #f4f3f0; border-color: rgba(0, 0, 0, 0.07); } /* ── Section headings ──────────────────────────────────────── */ .section-title { font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; color: var(--text-muted); } /* ── Checkbox accent ───────────────────────────────────────── */ input[type="checkbox"] { accent-color: var(--amber); } /* ── Template cards in tools new/edit ──────────────────────── */ .template-card { background: var(--surface-2) !important; border-color: var(--border) !important; transition: border-color 0.15s, background 0.25s; } .template-card:hover { border-color: var(--border-hi) !important; } .template-card.border-indigo-500 { border-color: var(--amber) !important; } /* ── Schema preview ────────────────────────────────────────── */ #schema-preview { color: var(--green) !important; } [data-theme="light"] #schema-preview { color: #059669 !important; } /* ── Animate pulse (keep compat) ───────────────────────────── */ .animate-pulse { animation: pulse-ring 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; } /* ============================================================== DARK THEME — Tailwind overrides for tools form pages Scoped to [data-theme="dark"] so light mode works natively ============================================================== */ [data-theme="dark"] .bg-white { background: var(--surface) !important; } [data-theme="dark"] .bg-slate-50 { background: var(--surface-2) !important; } [data-theme="dark"] .bg-slate-100 { background: var(--surface-2) !important; } [data-theme="dark"] .bg-slate-900 { background: #040408 !important; } [data-theme="dark"] .border-slate-100 { border-color: var(--border) !important; } [data-theme="dark"] .border-slate-200 { border-color: var(--border-md) !important; } [data-theme="dark"] .text-slate-900 { color: var(--text) !important; } [data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; } [data-theme="dark"] .text-slate-600 { color: var(--text-muted) !important; } [data-theme="dark"] .text-slate-500 { color: var(--text-muted) !important; } [data-theme="dark"] .text-slate-400 { color: #475569 !important; } [data-theme="dark"] .text-slate-300 { color: #94a3b8 !important; } [data-theme="dark"] .shadow-sm { box-shadow: none !important; } /* Form inputs in dark mode */ [data-theme="dark"] input[type="text"].rounded-xl, [data-theme="dark"] input[type="number"].rounded-xl, [data-theme="dark"] textarea.rounded-xl, [data-theme="dark"] select.rounded-xl { background: var(--surface-2) !important; border-color: var(--border-md) !important; color: var(--text) !important; } [data-theme="dark"] input[type="text"].rounded-xl::placeholder, [data-theme="dark"] textarea.rounded-xl::placeholder { color: var(--text-dim) !important; } [data-theme="dark"] input[type="text"].rounded-xl:focus, [data-theme="dark"] textarea.rounded-xl:focus, [data-theme="dark"] select.rounded-xl:focus { border-color: var(--indigo) !important; box-shadow: 0 0 0 3px var(--indigo-dim) !important; } /* Indigo → amber in dark */ [data-theme="dark"] .bg-indigo-600 { background: var(--amber) !important; color: #09090f !important; } [data-theme="dark"] .bg-indigo-600:hover, [data-theme="dark"] .hover\:bg-indigo-700:hover { background: var(--amber-soft) !important; } [data-theme="dark"] .text-indigo-700 { color: var(--amber) !important; } [data-theme="dark"] .text-indigo-600 { color: var(--amber) !important; } [data-theme="dark"] .bg-indigo-50 { background: var(--amber-dim) !important; } [data-theme="dark"] .hover\:bg-indigo-100:hover { background: var(--amber-glow) !important; } [data-theme="dark"] .focus\:ring-indigo-400:focus { box-shadow: 0 0 0 3px var(--indigo-dim) !important; } /* Method badge colors */ [data-theme="dark"] .bg-blue-50 { background: rgba(129,140,248,0.10) !important; } [data-theme="dark"] .text-blue-700 { color: var(--indigo) !important; } [data-theme="dark"] .bg-emerald-50 { background: var(--green-dim) !important; } [data-theme="dark"] .text-emerald-700{ color: var(--green) !important; } [data-theme="dark"] .bg-amber-50 { background: var(--amber-dim) !important; } [data-theme="dark"] .text-amber-700 { color: var(--amber) !important; } [data-theme="dark"] .bg-red-50 { background: var(--red-dim) !important; } [data-theme="dark"] .text-red-600 { color: var(--red) !important; } [data-theme="dark"] .border-red-200 { border-color: rgba(248,113,113,0.25) !important; } [data-theme="dark"] .hover\:bg-red-50:hover { background: var(--red-dim) !important; } [data-theme="dark"] .bg-orange-50 { background: rgba(251,146,60,0.08) !important; } [data-theme="dark"] .text-orange-700 { color: #fb923c !important; } [data-theme="dark"] .bg-violet-50 { background: var(--indigo-dim) !important; } [data-theme="dark"] .text-violet-700 { color: var(--indigo) !important; } [data-theme="dark"] .bg-purple-100, [data-theme="dark"] .bg-purple-50 { background: var(--indigo-dim) !important; } [data-theme="dark"] .text-purple-800, [data-theme="dark"] .text-purple-700, [data-theme="dark"] .text-purple-600 { color: var(--indigo) !important; } /* Test result panel */ [data-theme="dark"] .bg-green-50.border-green-200 { background: rgba(52,211,153,0.06) !important; border-color: rgba(52,211,153,0.2) !important; } [data-theme="dark"] .bg-red-50.border-red-200 { background: rgba(248,113,113,0.06) !important; border-color: rgba(248,113,113,0.2) !important; } [data-theme="dark"] .text-green-700 { color: var(--green) !important; } [data-theme="dark"] .text-red-700 { color: var(--red) !important; } /* Stats / misc */ [data-theme="dark"] .bg-green-600, [data-theme="dark"] .text-green-600 { color: var(--green) !important; background: transparent !important; } [data-theme="dark"] .bg-green-400 { background: var(--green) !important; box-shadow: 0 0 6px var(--green); } /* Template picker gradient */ [data-theme="dark"] .from-indigo-50.to-purple-50, [data-theme="dark"] .bg-gradient-to-br.from-indigo-50 { background: var(--surface-2) !important; border-color: var(--border) !important; } /* Misc inline bg-white in dark */ [data-theme="dark"] .hover\:bg-slate-50:hover { background: rgba(255,255,255,0.02) !important; } [data-theme="dark"] code.font-mono { color: var(--amber) !important; background: var(--surface-2) !important; } [data-theme="dark"] .bg-blue-50.border-blue-100 { background: rgba(129,140,248,0.06) !important; border-color: rgba(129,140,248,0.15) !important; } [data-theme="dark"] .text-indigo-700.bg-white { background: var(--surface-2) !important; color: var(--amber) !important; } /* ============================================================== LIGHT THEME — specific overrides for tools form pages (Tailwind classes are already light by default, so fewer needed) ============================================================== */ [data-theme="light"] .bg-slate-900 { background: #1e1b18 !important; } /* dark code block BG stays dark */ [data-theme="light"] code.font-mono { color: var(--amber) !important; } /* ============================================================== LIGHT THEME — Tailwind hardcoded text-color overrides Forces Tailwind dark-text classes to respect light theme tokens ============================================================== */ /* text-white → near-black in light mode (except on colored buttons/badges) */ [data-theme="light"] .text-white { color: var(--text) !important; } [data-theme="light"] .bg-indigo-600 .text-white, [data-theme="light"] .bg-indigo-600.text-white, [data-theme="light"] .btn-primary .text-white, [data-theme="light"] .btn-danger .text-white { color: #ffffff !important; } /* text-slate-200 / text-slate-300 → readable dark on light */ [data-theme="light"] .text-slate-200 { color: #374151 !important; } [data-theme="light"] .text-slate-300 { color: var(--text-muted) !important; } /* group-hover:text-amber-400 → amber foncé en light */ [data-theme="light"] .group:hover .group-hover\:text-amber-400 { color: var(--amber) !important; } [data-theme="light"] .hover\:text-white:hover { color: var(--text) !important; } /* Code block inline spans (agents/show, api_keys integration blueprint) */ [data-theme="light"] .code-block .text-white { color: #1e293b !important; } [data-theme="light"] .code-block .text-slate-200 { color: #374151 !important; } [data-theme="light"] .code-block .text-green-400 { color: #059669 !important; } /* Bubble text colors */ [data-theme="light"] .bubble-user .text-white { color: var(--text) !important; } [data-theme="light"] .bubble-ai .text-slate-200 { color: #374151 !important; }