/* * design-tokens.css — Private LLM Platform Design System * Inspired by Groq console: dark surfaces, Inter font, warm orange accent, tight spacing * * Usage: * Light (default) :root {} * Dark [data-theme="dark"] {} or add class="dark" to * * Apply tokens: color: var(--color-text-primary); * font-size: var(--text-sm); * gap: var(--space-3); */ /* ───────────────────────────────────────────────────────────────────────────── GOOGLE FONTS — loaded here so a single import covers all stylesheets ───────────────────────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap'); /* ───────────────────────────────────────────────────────────────────────────── ROOT — Light Mode (default) ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── Typography ─────────────────────────────────────── */ --font-sans: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace; --text-xs: 11px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 22px; --text-3xl: 28px; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed:1.625; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* ── Spacing (4px base) ─────────────────────────────── */ --space-0: 0px; --space-px: 1px; --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px; --space-3: 12px; --space-3-5: 14px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ── Border Radius ──────────────────────────────────── */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 10px; --radius-2xl: 12px; --radius-3xl: 16px; --radius-full: 9999px; /* ── Transitions ────────────────────────────────────── */ --duration-fast: 100ms; --duration-base: 150ms; --duration-slow: 250ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-index ────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown:50; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-toast: 400; /* ── Palette — Raw (light) ──────────────────────────── */ /* Neutral */ --neutral-0: #ffffff; --neutral-50: #fafafa; --neutral-100: #f5f5f5; --neutral-200: #e5e5e5; --neutral-300: #d4d4d4; --neutral-400: #a3a3a3; --neutral-500: #737373; --neutral-600: #525252; --neutral-700: #404040; --neutral-800: #262626; --neutral-900: #171717; --neutral-950: #0a0a0a; /* Orange / Groq accent */ --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74; --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #f55036; /* ← Groq primary */ --orange-700: #c2410c; --orange-800: #9a3412; --orange-900: #7c2d12; /* Green */ --green-500: #22c55e; --green-600: #16a34a; --green-100: #dcfce7; --green-800: #166534; /* Blue */ --blue-500: #3b82f6; --blue-600: #2563eb; --blue-100: #dbeafe; --blue-800: #1e40af; /* Red */ --red-500: #ef4444; --red-600: #dc2626; --red-100: #fee2e2; --red-800: #991b1b; /* Amber */ --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-100: #fef3c7; --amber-800: #92400e; /* ── Semantic — Surface ─────────────────────────────── */ --color-bg: var(--neutral-0); /* page background */ --color-surface-0: var(--neutral-0); /* cards, panels */ --color-surface-1: var(--neutral-50); /* sidebar, raised */ --color-surface-2: var(--neutral-100); /* hover, selected bg */ --color-surface-3: var(--neutral-200); /* input backgrounds */ /* ── Semantic — Border ──────────────────────────────── */ --color-border-subtle: var(--neutral-100); --color-border: var(--neutral-200); --color-border-strong: var(--neutral-300); /* ── Semantic — Text ────────────────────────────────── */ --color-text-primary: var(--neutral-900); --color-text-secondary: var(--neutral-600); --color-text-muted: var(--neutral-400); --color-text-disabled: var(--neutral-300); --color-text-inverse: var(--neutral-0); --color-text-on-accent: var(--neutral-0); /* ── Semantic — Accent (Groq orange) ────────────────── */ --color-accent: var(--orange-600); --color-accent-hover: var(--orange-500); --color-accent-muted: var(--orange-50); --color-accent-border: var(--orange-200); --color-accent-text: var(--orange-600); /* ── Semantic — Status ──────────────────────────────── */ --color-success: var(--green-500); --color-success-bg: var(--green-100); --color-success-text: var(--green-800); --color-success-border: #bbf7d0; --color-warning: var(--amber-500); --color-warning-bg: var(--amber-100); --color-warning-text: var(--amber-800); --color-warning-border: #fde68a; --color-error: var(--red-500); --color-error-bg: var(--red-100); --color-error-text: var(--red-800); --color-error-border: #fecaca; --color-info: var(--blue-500); --color-info-bg: var(--blue-100); --color-info-text: var(--blue-800); --color-info-border: #bfdbfe; /* ── Semantic — Interactive ─────────────────────────── */ --color-focus-ring: rgba(245, 80, 54, 0.35); /* ── Shadows ────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.08), 0 2px 4px -2px rgba(0,0,0,0.06); --shadow-lg: 0 8px 24px -4px rgba(0,0,0,0.10), 0 2px 8px -2px rgba(0,0,0,0.06); --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.14), 0 4px 12px -2px rgba(0,0,0,0.08); --shadow-focus: 0 0 0 3px var(--color-focus-ring); /* ── Sidebar dimensions ─────────────────────────────── */ --sidebar-width: 240px; --topbar-height: 56px; --panel-width: 380px; } /* ───────────────────────────────────────────────────────────────────────────── DARK MODE — [data-theme="dark"] or .dark on Matches Groq console palette ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"], .dark { /* Surface */ --color-bg: #0d0d0f; --color-surface-0: #0d0d0f; --color-surface-1: #141416; --color-surface-2: #1c1c20; --color-surface-3: #242428; /* Border */ --color-border-subtle: #1e1e22; --color-border: #27272c; --color-border-strong: #36363e; /* Text */ --color-text-primary: #f4f4f5; --color-text-secondary: #a1a1aa; --color-text-muted: #71717a; --color-text-disabled: #3f3f46; --color-text-inverse: #0d0d0f; --color-text-on-accent: #ffffff; /* Accent — same orange, slightly brighter on dark */ --color-accent: #f55036; --color-accent-hover: #ff6b52; --color-accent-muted: rgba(245, 80, 54, 0.12); --color-accent-border: rgba(245, 80, 54, 0.30); --color-accent-text: #ff7a62; /* Status */ --color-success: #22c55e; --color-success-bg: rgba(34, 197, 94, 0.10); --color-success-text: #4ade80; --color-success-border: rgba(34, 197, 94, 0.25); --color-warning: #f59e0b; --color-warning-bg: rgba(245, 158, 11, 0.10); --color-warning-text: #fbbf24; --color-warning-border: rgba(245, 158, 11, 0.25); --color-error: #ef4444; --color-error-bg: rgba(239, 68, 68, 0.10); --color-error-text: #f87171; --color-error-border: rgba(239, 68, 68, 0.25); --color-info: #3b82f6; --color-info-bg: rgba(59, 130, 246, 0.10); --color-info-text: #60a5fa; --color-info-border: rgba(59, 130, 246, 0.25); /* Shadows (more prominent on dark) */ --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.20); --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.30), 0 1px 2px -1px rgba(0,0,0,0.20); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.40), 0 2px 4px -2px rgba(0,0,0,0.30); --shadow-lg: 0 8px 24px -4px rgba(0,0,0,0.50), 0 2px 8px -2px rgba(0,0,0,0.30); --shadow-xl: 0 20px 40px -8px rgba(0,0,0,0.60), 0 4px 12px -2px rgba(0,0,0,0.40); } /* ───────────────────────────────────────────────────────────────────────────── BASE RESETS — apply tokens to bare elements ───────────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-regular); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; background-color: var(--color-bg); color: var(--color-text-primary); } /* ── Headings ────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin: 0; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); font-weight: var(--weight-medium); } h5 { font-size: var(--text-md); font-weight: var(--weight-medium); } h6 { font-size: var(--text-sm); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); } /* ── Code ────────────────────────────────────────────────────────────────── */ code, kbd, samp, pre { font-family: var(--font-mono); font-size: var(--text-sm); } code { background: var(--color-surface-2); color: var(--color-text-primary); padding: 2px 5px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } pre { background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); overflow-x: auto; line-height: var(--leading-relaxed); } pre code { background: none; border: none; padding: 0; font-size: var(--text-sm); } /* ── Focus ───────────────────────────────────────────────────────────────── */ :focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ───────────────────────────────────────────────────────────────────────────── COMPONENT PRIMITIVES ───────────────────────────────────────────────────────────────────────────── */ /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; border-radius: var(--radius-lg); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default), color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); white-space: nowrap; user-select: none; text-decoration: none; } .btn:focus-visible { box-shadow: var(--shadow-focus); } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } /* Sizes */ .btn-xs { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-md); } .btn-sm { padding: var(--space-1-5) var(--space-3); font-size: var(--text-sm); } .btn-md { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } .btn-lg { padding: var(--space-2-5) var(--space-5); font-size: var(--text-md); } /* Variants */ .btn-primary { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } .btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn-secondary { background: var(--color-surface-1); color: var(--color-text-primary); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); } .btn-ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text-primary); } .btn-danger { background: transparent; color: var(--color-error-text); border-color: transparent; } .btn-danger:hover { background: var(--color-error-bg); border-color: var(--color-error-border); } /* ── Inputs ──────────────────────────────────────────────────────────────── */ .input { display: block; width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-primary); background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); outline: none; box-sizing: border-box; } .input::placeholder { color: var(--color-text-muted); } .input:hover { border-color: var(--color-border-strong); } .input:focus { border-color: var(--color-accent); box-shadow: var(--shadow-focus); } .input:disabled { opacity: 0.5; cursor: not-allowed; background: var(--color-surface-2); } .input-sm { padding: var(--space-1-5) var(--space-2-5); font-size: var(--text-xs); border-radius: var(--radius-md); } .input-lg { padding: var(--space-3) var(--space-4); font-size: var(--text-md); border-radius: var(--radius-xl); } select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737373' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } /* ── Labels ──────────────────────────────────────────────────────────────── */ .label { display: block; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-1-5); } /* ── Form group ──────────────────────────────────────────────────────────── */ .field { display: flex; flex-direction: column; gap: var(--space-1-5); margin-bottom: var(--space-4); } /* ── Cards ───────────────────────────────────────────────────────────────── */ .card { background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); } .card-sm { border-radius: var(--radius-xl); padding: var(--space-3); } .card-md { border-radius: var(--radius-2xl); padding: var(--space-4); } .card-lg { border-radius: var(--radius-3xl); padding: var(--space-6); } .card-interactive { cursor: pointer; transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default), transform var(--duration-base) var(--ease-default); } .card-interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); } /* ── Badges / Pills ──────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.4; border-radius: var(--radius-full); border: 1px solid transparent; white-space: nowrap; } .badge-default { background: var(--color-surface-2); color: var(--color-text-secondary); border-color: var(--color-border); } .badge-accent { background: var(--color-accent-muted); color: var(--color-accent-text); border-color: var(--color-accent-border); } .badge-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); } .badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); } .badge-error { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); } .badge-info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); } /* ── Dividers ────────────────────────────────────────────────────────────── */ .divider { height: 1px; background: var(--color-border); border: none; margin: 0; } .divider-v { width: 1px; align-self: stretch; background: var(--color-border); } /* ── Scrollbar ───────────────────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ── Toast ───────────────────────────────────────────────────────────────── */ .toast { position: fixed; bottom: var(--space-6); right: var(--space-6); display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-xl); font-size: var(--text-sm); font-weight: var(--weight-medium); box-shadow: var(--shadow-lg); border: 1px solid transparent; z-index: var(--z-toast); animation: toast-slide-in var(--duration-slow) var(--ease-spring); } .toast-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); } .toast-error { background: var(--color-error-bg); color: var(--color-error-text); border-color: var(--color-error-border); } .toast-info { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-border); } @keyframes toast-slide-in { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: translateY(0); } } /* ── Text utilities ──────────────────────────────────────────────────────── */ .text-primary { color: var(--color-text-primary) !important; } .text-secondary { color: var(--color-text-secondary) !important; } .text-muted { color: var(--color-text-muted) !important; } .text-accent { color: var(--color-accent-text) !important; } .text-success { color: var(--color-success-text) !important; } .text-warning { color: var(--color-warning-text) !important; } .text-error { color: var(--color-error-text) !important; } .text-xs { font-size: var(--text-xs) !important; } .text-sm { font-size: var(--text-sm) !important; } .text-base { font-size: var(--text-base) !important; } .text-lg { font-size: var(--text-lg) !important; } .text-xl { font-size: var(--text-xl) !important; } .font-mono { font-family: var(--font-mono) !important; } .font-medium { font-weight: var(--weight-medium) !important; } .font-semibold { font-weight: var(--weight-semibold) !important; } .font-bold { font-weight: var(--weight-bold) !important; } .uppercase { text-transform: uppercase !important; letter-spacing: var(--tracking-wider) !important; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ───────────────────────────────────────────────────────────────────────────── TAILWIND BLUE → ACCENT REMAPS (both themes) Replaces Tailwind blue utility classes with the design-system accent color ───────────────────────────────────────────────────────────────────────────── */ .bg-blue-600, .bg-blue-500 { background-color: var(--color-accent) !important; } .bg-blue-50, .bg-blue-100 { background-color: var(--color-accent-muted) !important; } .bg-blue-200 { background-color: var(--color-accent-muted) !important; } .text-blue-600, .text-blue-700, .text-blue-500 { color: var(--color-accent-text) !important; } .text-blue-800 { color: var(--color-accent-text) !important; } .border-blue-200 { border-color: var(--color-accent-border) !important; } .hover\:bg-blue-100:hover { background-color: var(--color-accent-muted) !important; } .hover\:bg-blue-700:hover, .hover\:bg-blue-600:hover { background-color: var(--color-accent-hover) !important; } .hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover { color: var(--color-accent-text) !important; } .peer-checked\:bg-blue-600:is(:checked ~ *), [class*="peer-checked:bg-blue-6"] { background-color: var(--color-accent) !important; } /* Tailwind focus rings */ .focus\:ring-blue-500:focus, .focus\:ring-blue-400:focus, .focus\:ring-blue-300:focus { --tw-ring-color: var(--color-focus-ring) !important; box-shadow: 0 0 0 2px var(--color-focus-ring) !important; } .focus\:border-blue-400:focus, .focus\:border-blue-500:focus { border-color: var(--color-accent) !important; } /* Tailwind hover state-modifier variants */ .hover\:text-blue-600:hover, .hover\:text-blue-700:hover, .hover\:text-blue-800:hover { color: var(--color-accent-text) !important; } .hover\:border-blue-400:hover { border-color: var(--color-accent) !important; } /* Tailwind peer-checked toggle background */ .peer:checked ~ .peer-checked\:bg-blue-600 { background-color: var(--color-accent) !important; } /* Tailwind peer-focus ring */ .peer:focus ~ .peer-focus\:ring-blue-300, .peer:focus-visible ~ .peer-focus\:ring-blue-300 { --tw-ring-color: var(--color-focus-ring) !important; } /* Additional blue shades not yet mapped */ .text-blue-900, .text-blue-800 { color: var(--color-accent-text) !important; } /* Native checkbox / radio / range accent color */ input[type="checkbox"], input[type="radio"], input[type="range"], .accent-checkbox { accent-color: var(--color-accent); } /* ───────────────────────────────────────────────────────────────────────────── TAILWIND UTILITY DARK-MODE OVERRIDES Remaps Tailwind color classes used throughout index.html to design tokens ───────────────────────────────────────────────────────────────────────────── */ [data-theme="dark"] body { background: var(--color-bg); color: var(--color-text-primary); } [data-theme="dark"] .bg-white { background-color: var(--color-surface-0) !important; } [data-theme="dark"] .bg-gray-50 { background-color: var(--color-surface-1) !important; } [data-theme="dark"] .bg-gray-100 { background-color: var(--color-surface-2) !important; } [data-theme="dark"] .bg-gray-200 { background-color: var(--color-surface-3) !important; } [data-theme="dark"] .border-gray-200 { border-color: var(--color-border) !important; } [data-theme="dark"] .border-gray-300 { border-color: var(--color-border-strong) !important; } [data-theme="dark"] .border { border-color: var(--color-border) !important; } [data-theme="dark"] .text-gray-900 { color: var(--color-text-primary) !important; } [data-theme="dark"] .text-gray-800 { color: var(--color-text-primary) !important; } [data-theme="dark"] .text-gray-700 { color: var(--color-text-primary) !important; } [data-theme="dark"] .text-gray-600 { color: var(--color-text-secondary) !important; } [data-theme="dark"] .text-gray-500 { color: var(--color-text-secondary) !important; } [data-theme="dark"] .text-gray-400 { color: var(--color-text-muted) !important; } [data-theme="dark"] .text-blue-600 { color: var(--color-accent-text) !important; } [data-theme="dark"] .text-blue-700 { color: var(--color-accent-text) !important; } [data-theme="dark"] .hover\:bg-gray-100:hover { background-color: var(--color-surface-2) !important; } [data-theme="dark"] .hover\:bg-gray-200:hover { background-color: var(--color-surface-3) !important; } [data-theme="dark"] .hover\:text-gray-700:hover { color: var(--color-text-primary) !important; } [data-theme="dark"] .hover\:text-blue-700:hover { color: var(--color-accent-text) !important; } [data-theme="dark"] .bg-blue-600 { background-color: var(--color-accent) !important; } [data-theme="dark"] .hover\:bg-blue-700:hover { background-color: var(--color-accent-hover) !important; } /* Generic input/select/textarea fallback for anything using Tailwind border classes */ [data-theme="dark"] input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] textarea, [data-theme="dark"] select { background-color: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-primary); } [data-theme="dark"] input::placeholder, [data-theme="dark"] textarea::placeholder { color: var(--color-text-muted); } /* ───────────────────────────────────────────────────────────────────────────── BEM BUTTON / BADGE ALIASES AuthUI uses double-dash BEM modifiers (btn--accent) alongside the existing single-dash variants (btn-primary). Define them here so both work. ───────────────────────────────────────────────────────────────────────────── */ .btn--accent { background: var(--color-accent); color: var(--color-text-on-accent); border-color: var(--color-accent); } .btn--accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn--ghost { background: transparent; color: var(--color-text-secondary); border-color: transparent; } .btn--ghost:hover { background: var(--color-surface-2); color: var(--color-text-primary); } .btn--sm { padding: var(--space-1-5) var(--space-3); font-size: var(--text-sm); } .badge--accent, .badge--pro { background: var(--color-accent-muted); color: var(--color-accent-text); border-color: var(--color-accent-border); } /* ───────────────────────────────────────────────────────────────────────────── AUTH MODAL ───────────────────────────────────────────────────────────────────────────── */ /* ── Overlay ─────────────────────────────────────────────────────────────── */ .auth-modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: auth-overlay-in var(--duration-slow) var(--ease-out); } @keyframes auth-overlay-in { from { opacity: 0; } to { opacity: 1; } } /* ── Dialog card ─────────────────────────────────────────────────────────── */ .auth-modal { position: relative; width: 100%; max-width: 400px; background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: var(--space-8); animation: auth-modal-up var(--duration-slow) var(--ease-spring); } @keyframes auth-modal-up { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } } /* ── Close button ────────────────────────────────────────────────────────── */ .auth-modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1; cursor: pointer; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default); } .auth-modal__close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } .auth-modal__close:focus-visible { box-shadow: var(--shadow-focus); outline: none; } /* ── Title ───────────────────────────────────────────────────────────────── */ .auth-modal__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); margin: 0 0 var(--space-6); } /* ── OAuth buttons ───────────────────────────────────────────────────────── */ .auth-modal__oauth { display: flex; flex-direction: column; gap: var(--space-3); } .btn--oauth { display: flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; padding: var(--space-2-5) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: background var(--duration-base) var(--ease-default), border-color var(--duration-base) var(--ease-default); } .btn--oauth:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); } .btn--oauth:focus-visible { box-shadow: var(--shadow-focus); outline: none; } .btn--oauth svg { flex-shrink: 0; } /* ── "or" divider ────────────────────────────────────────────────────────── */ .auth-modal__divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .auth-modal__divider::before, .auth-modal__divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } /* ── Form ────────────────────────────────────────────────────────────────── */ .auth-modal__form { display: flex; flex-direction: column; gap: var(--space-4); } .auth-modal__label { display: flex; flex-direction: column; gap: var(--space-1-5); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-secondary); letter-spacing: var(--tracking-wide); } .auth-modal__input { display: block; width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--color-text-primary); background: var(--color-surface-1); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-2-5) var(--space-3); outline: none; box-sizing: border-box; transition: border-color var(--duration-base) var(--ease-default), box-shadow var(--duration-base) var(--ease-default); } .auth-modal__input::placeholder { color: var(--color-text-muted); } .auth-modal__input:hover { border-color: var(--color-border-strong); } .auth-modal__input:focus { border-color: var(--color-accent); box-shadow: var(--shadow-focus); } /* ── Error message ───────────────────────────────────────────────────────── */ .auth-modal__error { font-size: var(--text-xs); color: var(--color-error-text); background: var(--color-error-bg); border: 1px solid var(--color-error-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); line-height: var(--leading-relaxed); } /* ── Submit button ───────────────────────────────────────────────────────── */ .auth-modal__submit { width: 100%; padding: var(--space-2-5) var(--space-4); margin-top: var(--space-1); } /* ── Mode toggle ─────────────────────────────────────────────────────────── */ .auth-modal__toggle { margin: var(--space-5) 0 0; text-align: center; font-size: var(--text-xs); color: var(--color-text-secondary); } .auth-modal__link { background: none; border: none; padding: 0; font-family: inherit; font-size: inherit; font-weight: var(--weight-medium); color: var(--color-accent-text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .auth-modal__link:hover { color: var(--color-accent); } .auth-modal__link:focus-visible { box-shadow: var(--shadow-focus); outline: none; border-radius: var(--radius-sm); } /* ───────────────────────────────────────────────────────────────────────────── ACCOUNT SECTION (settings panel — signed-in / signed-out states) ───────────────────────────────────────────────────────────────────────────── */ .account-info { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); min-width: 0; } .account-email { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .account-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .account-prompt { font-size: var(--text-xs); color: var(--color-text-muted); margin: 0 0 var(--space-3); line-height: var(--leading-relaxed); } /* ── Account widget — bottom-left sidebar corner ──────────────────────────── */ #account-widget { position: relative; } .account-avatar-btn { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-on-accent); font-size: var(--text-sm); font-weight: var(--weight-semibold); font-family: var(--font-sans); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s; flex-shrink: 0; line-height: 1; } .account-avatar-btn:hover { opacity: 0.82; } .account-avatar-btn--ghost { background: var(--color-surface-2); color: var(--color-text-muted); } .account-avatar-btn--ghost:hover { background: var(--color-surface-3); color: var(--color-text-secondary); opacity: 1; } .account-popover { position: fixed; /* JS sets bottom/left/right at open time to escape overflow:hidden */ background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); z-index: 600; overflow: hidden; } .account-popover__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); } .account-popover__initials { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-on-accent); font-size: var(--text-base); font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .account-popover__meta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } .account-popover__email-text { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-popover__hr { height: 1px; background: var(--color-border-subtle); margin: 0; border: none; } .account-popover__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2-5) var(--space-4); font-size: var(--text-sm); font-family: var(--font-sans); color: var(--color-text-secondary); text-decoration: none; background: none; border: none; width: 100%; text-align: left; cursor: pointer; transition: background 0.12s, color 0.12s; line-height: var(--leading-normal); } .account-popover__item:hover { background: var(--color-surface-2); color: var(--color-text-primary); } .account-popover__item i { width: 14px; text-align: center; flex-shrink: 0; font-size: var(--text-xs); } .account-popover__item--danger { color: var(--color-error, #ef4444); } .account-popover__item--danger:hover { background: var(--color-error-bg, #fee2e2); color: var(--color-error-text, #991b1b); } /* ── Account modal ────────────────────────────────────────────────────────── */ .acct-modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 300; } .acct-modal { position: relative; background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18); width: 100%; max-width: 400px; padding: var(--space-6); font-family: var(--font-sans); } .acct-modal__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 28px; height: 28px; border-radius: var(--radius-md); background: none; border: none; cursor: pointer; color: var(--color-text-muted); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); transition: background 0.12s, color 0.12s; } .acct-modal__close:hover { background: var(--color-surface-2); color: var(--color-text-primary); } .acct-modal__header { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); } .acct-modal__avatar { width: 48px; height: 48px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-text-on-accent); font-size: var(--text-xl); font-weight: var(--weight-semibold); display: flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .acct-modal__identity { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; } .acct-modal__email { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .acct-modal__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .acct-modal__since { font-size: var(--text-xs); color: var(--color-text-muted); } .acct-modal__hr { height: 1px; background: var(--color-border-subtle); border: none; margin: var(--space-4) 0; } .acct-modal__notice { border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); } .acct-modal__notice--warning { background: color-mix(in srgb, var(--color-warning, #f59e0b) 10%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning, #f59e0b) 35%, transparent); color: var(--color-text-secondary); } .acct-modal__link { background: none; border: none; cursor: pointer; font-size: inherit; font-family: inherit; color: var(--color-accent-text); padding: 0; text-decoration: underline; text-underline-offset: 2px; } .acct-modal__link:hover { opacity: 0.8; } .acct-modal__actions { display: flex; flex-direction: column; gap: var(--space-2); } .acct-modal__error { font-size: var(--text-xs); color: var(--color-error-text, #991b1b); background: var(--color-error-bg, #fee2e2); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } .acct-modal__footer { display: flex; justify-content: flex-end; }