/* ───────────────────────────────────────────────────────────────────── CrazySD theme — Sprint 64.5 dual-theme (light default + dark via toggle) ────────────────────────────────────────────────────────────────────── Refactored from Sprint 64.4. Light is now the primary theme; dark is opt-in via [data-theme="dark"] on . Toggle UI lives in base.html (sun/moon button); localStorage 'csd-theme' persists the choice across sessions. On first visit prefers-color-scheme decides. Tokens are CSS variables declared in `:root` (light) and overridden by `[data-theme="dark"]`. All theme-aware styling reads from variables — class remaps for legacy Tailwind utilities are scoped to the dark selector only, since the existing markup is already designed for light. ─────────────────────────────────────────────────────────────────────── */ /* ── Tokens — light (default) ───────────────────────────────────── */ :root { --csd-bg-0: #ffffff; /* page background */ --csd-bg-1: #f8fafc; /* slate-50 — surface / card on page */ --csd-bg-2: #f1f5f9; /* slate-100 — elevated surface / input */ --csd-bg-3: #e2e8f0; /* slate-200 — surface hover */ --csd-border: rgb(0 0 0 / 0.08); --csd-border-2: rgb(0 0 0 / 0.14); --csd-text-1: #0f172a; /* slate-900 — primary text */ --csd-text-2: #475569; /* slate-600 — secondary text */ --csd-text-3: #64748b; /* slate-500 — muted / placeholder */ --csd-accent: #10b981; /* emerald-500 — single brand accent */ --csd-accent-soft: rgb(16 185 129 / 0.10); --csd-accent-ring: rgb(16 185 129 / 0.35); --csd-nav-active: #047857; /* emerald-700 — readable on white */ --csd-info: #2563eb; /* blue-600 — running */ --csd-warn: #d97706; /* amber-600 — pending */ --csd-error: #dc2626; /* red-600 — error */ --csd-violet: #7c3aed; /* violet-600 — info accent */ --csd-chart-grid: rgb(0 0 0 / 0.06); --csd-chart-axis: #64748b; --csd-shadow-card: 0 1px 2px rgb(0 0 0 / 0.05); --csd-shadow-hover: 0 4px 16px -4px rgb(0 0 0 / 0.08); --csd-page-gradient-1: rgb(16 185 129 / 0.05); --csd-page-gradient-2: rgb(167 139 250 / 0.04); --csd-header-bg: rgb(255 255 255 / 0.82); --csd-header-border: rgb(0 0 0 / 0.06); } /* ── Tokens — dark (opt-in) ─────────────────────────────────────── */ html[data-theme="dark"] { --csd-bg-0: #09090b; --csd-bg-1: #121214; --csd-bg-2: #18181b; --csd-bg-3: #27272a; --csd-border: rgb(255 255 255 / 0.06); --csd-border-2: rgb(255 255 255 / 0.10); --csd-text-1: #fafafa; --csd-text-2: #a1a1aa; --csd-text-3: #71717a; --csd-accent-soft: rgb(16 185 129 / 0.12); --csd-accent-ring: rgb(16 185 129 / 0.30); --csd-nav-active: #34d399; /* emerald-400 — readable on dark surface */ --csd-info: #60a5fa; /* blue-400 */ --csd-warn: #fbbf24; /* amber-400 */ --csd-error: #f87171; /* red-400 */ --csd-violet: #a78bfa; /* violet-400 */ --csd-chart-grid: rgb(255 255 255 / 0.06); --csd-chart-axis: #71717a; --csd-shadow-card: 0 1px 2px rgb(0 0 0 / 0.40); --csd-shadow-hover: 0 4px 24px -8px rgb(0 0 0 / 0.50); --csd-page-gradient-1: rgb(16 185 129 / 0.06); --csd-page-gradient-2: rgb(167 139 250 / 0.05); --csd-header-bg: rgb(18 18 20 / 0.72); --csd-header-border: rgb(255 255 255 / 0.06); } /* Match the browser color-scheme to the active theme so form widgets, scrollbars, and selection inherit the right palette automatically. */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; } /* ── Global page chrome — reads from tokens, works on both themes ─ */ html, body { background: var(--csd-bg-0); color: var(--csd-text-1); font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; font-feature-settings: 'cv11', 'ss01', 'ss03'; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } html.dark { /* legacy backstop — Sprint 64.4 used this class. Kept so any hold-over markup still triggers dark mode without a redeploy. */ background: var(--csd-bg-0); } code, pre, .font-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } /* Theme transition — soft fade on every color/background/border so the toggle feels intentional instead of an abrupt repaint. */ html, body, .csd-card, .csd-hero, .csd-stage-node, header, button, a, input, textarea, select, details, [class*="bg-"], [class*="text-"], [class*="border-"] { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; } /* Subtle radial gradient behind the page — emerald at top, violet at bottom-right. Variable-driven so both themes get a tuned version. */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--csd-page-gradient-1), transparent 60%), radial-gradient(ellipse 80% 50% at 100% 100%, var(--csd-page-gradient-2), transparent 60%); pointer-events: none; z-index: 0; } body > * { position: relative; z-index: 1; } /* Scrollbar — thin, picks accent on hover. Same selector for both themes; the colors flip via vars (light: dark thumb on white, dark: light thumb on black). */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--csd-border-2); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--csd-text-3); } html { scrollbar-width: thin; scrollbar-color: var(--csd-border-2) transparent; } /* Selection */ ::selection { background: rgb(16 185 129 / 0.25); color: var(--csd-text-1); } /* Focus ring */ *:focus-visible { outline: 2px solid var(--csd-accent-ring); outline-offset: 2px; } /* ── Class remaps — DARK-ONLY ─────────────────────────────────────── The existing templates use light-mode Tailwind utilities (bg-white, text-slate-900, border-slate-200…). On light theme they render as intended; we only need to override them when the operator picks dark. ─────────────────────────────────────────────────────────────────────── */ html[data-theme="dark"] .bg-slate-50 { background-color: var(--csd-bg-0); } html[data-theme="dark"] .bg-slate-100 { background-color: var(--csd-bg-2); } html[data-theme="dark"] .bg-slate-200 { background-color: var(--csd-bg-3); } html[data-theme="dark"] .bg-white { background-color: var(--csd-bg-1); } html[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: var(--csd-bg-2); } html[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: var(--csd-bg-3); } html[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: var(--csd-bg-3); } html[data-theme="dark"] .hover\:bg-slate-700:hover { background-color: rgb(63 63 70); } html[data-theme="dark"] .text-slate-900 { color: var(--csd-text-1); } html[data-theme="dark"] .text-slate-800 { color: var(--csd-text-1); } html[data-theme="dark"] .text-slate-700 { color: var(--csd-text-2); } html[data-theme="dark"] .text-slate-600 { color: var(--csd-text-2); } html[data-theme="dark"] .text-slate-500 { color: var(--csd-text-3); } html[data-theme="dark"] .text-slate-400 { color: var(--csd-text-3); } html[data-theme="dark"] .text-slate-300 { color: var(--csd-text-3); } html[data-theme="dark"] .border-slate-200 { border-color: var(--csd-border); } html[data-theme="dark"] .border-slate-300 { border-color: var(--csd-border-2); } html[data-theme="dark"] .border-slate-100 { border-color: var(--csd-border); } html[data-theme="dark"] .divide-slate-100 > * + * { border-color: var(--csd-border); } html[data-theme="dark"] .ring-slate-200 { --tw-ring-color: var(--csd-border); } /* Emerald (success / approve / done) — dark variants */ html[data-theme="dark"] .bg-emerald-50 { background-color: rgb(16 185 129 / 0.10); } html[data-theme="dark"] .bg-emerald-100 { background-color: rgb(16 185 129 / 0.15); } html[data-theme="dark"] .bg-emerald-600 { background-color: rgb(5 150 105); } html[data-theme="dark"] .bg-emerald-700 { background-color: rgb(4 120 87); } html[data-theme="dark"] .text-emerald-700 { color: rgb(110 231 183); } html[data-theme="dark"] .text-emerald-800 { color: rgb(110 231 183); } html[data-theme="dark"] .text-emerald-900 { color: rgb(167 243 208); } html[data-theme="dark"] .ring-emerald-200 { --tw-ring-color: rgb(16 185 129 / 0.30); } html[data-theme="dark"] .ring-emerald-100 { --tw-ring-color: rgb(16 185 129 / 0.20); } html[data-theme="dark"] .border-emerald-200 { border-color: rgb(16 185 129 / 0.30); } html[data-theme="dark"] .border-emerald-300 { border-color: rgb(16 185 129 / 0.40); } html[data-theme="dark"] .hover\:bg-emerald-700:hover { background-color: rgb(4 120 87); } /* Amber */ html[data-theme="dark"] .bg-amber-50 { background-color: rgb(251 191 36 / 0.10); } html[data-theme="dark"] .bg-amber-100 { background-color: rgb(251 191 36 / 0.16); } html[data-theme="dark"] .bg-amber-200 { background-color: rgb(251 191 36 / 0.22); } html[data-theme="dark"] .text-amber-700 { color: rgb(252 211 77); } html[data-theme="dark"] .text-amber-800 { color: rgb(252 211 77); } html[data-theme="dark"] .text-amber-900 { color: rgb(253 224 71); } html[data-theme="dark"] .ring-amber-200 { --tw-ring-color: rgb(251 191 36 / 0.30); } html[data-theme="dark"] .border-amber-200 { border-color: rgb(251 191 36 / 0.30); } html[data-theme="dark"] .border-amber-300 { border-color: rgb(251 191 36 / 0.40); } /* Blue */ html[data-theme="dark"] .bg-blue-50 { background-color: rgb(96 165 250 / 0.10); } html[data-theme="dark"] .bg-blue-100 { background-color: rgb(96 165 250 / 0.16); } html[data-theme="dark"] .text-blue-700 { color: rgb(147 197 253); } html[data-theme="dark"] .text-blue-800 { color: rgb(147 197 253); } html[data-theme="dark"] .text-blue-900 { color: rgb(191 219 254); } html[data-theme="dark"] .ring-blue-200 { --tw-ring-color: rgb(96 165 250 / 0.30); } html[data-theme="dark"] .border-blue-200 { border-color: rgb(96 165 250 / 0.30); } html[data-theme="dark"] .border-blue-300 { border-color: rgb(96 165 250 / 0.40); } /* Red */ html[data-theme="dark"] .bg-red-50 { background-color: rgb(248 113 113 / 0.10); } html[data-theme="dark"] .bg-red-100 { background-color: rgb(248 113 113 / 0.16); } html[data-theme="dark"] .bg-red-600 { background-color: rgb(220 38 38); } html[data-theme="dark"] .bg-red-700 { background-color: rgb(185 28 28); } html[data-theme="dark"] .text-red-700 { color: rgb(252 165 165); } html[data-theme="dark"] .text-red-800 { color: rgb(252 165 165); } html[data-theme="dark"] .text-red-900 { color: rgb(254 202 202); } html[data-theme="dark"] .ring-red-200 { --tw-ring-color: rgb(248 113 113 / 0.30); } html[data-theme="dark"] .border-red-200 { border-color: rgb(248 113 113 / 0.30); } html[data-theme="dark"] .border-red-300 { border-color: rgb(248 113 113 / 0.40); } html[data-theme="dark"] .hover\:bg-red-700:hover { background-color: rgb(185 28 28); } /* Indigo / violet — info accent */ html[data-theme="dark"] .bg-indigo-50 { background-color: rgb(167 139 250 / 0.10); } html[data-theme="dark"] .bg-indigo-100 { background-color: rgb(167 139 250 / 0.16); } html[data-theme="dark"] .text-indigo-600 { color: rgb(196 181 253); } html[data-theme="dark"] .text-indigo-700 { color: rgb(196 181 253); } html[data-theme="dark"] .text-indigo-800 { color: rgb(196 181 253); } html[data-theme="dark"] .text-indigo-900 { color: rgb(221 214 254); } html[data-theme="dark"] .border-indigo-200 { border-color: rgb(167 139 250 / 0.30); } html[data-theme="dark"] .border-indigo-300 { border-color: rgb(167 139 250 / 0.40); } html[data-theme="dark"] .hover\:bg-indigo-200:hover { background-color: rgb(167 139 250 / 0.25); } html[data-theme="dark"] .hover\:text-indigo-600:hover { color: rgb(196 181 253); } html[data-theme="dark"] .ring-indigo-400 { --tw-ring-color: rgb(167 139 250 / 0.55); } html[data-theme="dark"] .ring-indigo-500 { --tw-ring-color: rgb(167 139 250 / 0.65); } html[data-theme="dark"] .focus\:border-indigo-500:focus { border-color: rgb(167 139 250); } /* slate-900 / slate-700 buttons → emerald CTA on dark */ html[data-theme="dark"] .bg-slate-900 { background-color: rgb(16 185 129); } html[data-theme="dark"] .hover\:bg-slate-700:hover { background-color: rgb(5 150 105); } /* Disabled / inactive */ html[data-theme="dark"] .disabled\:bg-slate-300:disabled, html[data-theme="dark"] .disabled\:bg-slate-400:disabled { background-color: var(--csd-bg-3); color: var(--csd-text-3); } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } /* Input fields — dark only; light keeps default browser/tailwind */ html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"], html[data-theme="dark"] input[type="url"], html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: var(--csd-bg-2); border-color: var(--csd-border); color: var(--csd-text-1); } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--csd-text-3); } /* Code blocks — dark only */ html[data-theme="dark"] pre, html[data-theme="dark"] code:not(.no-theme) { background-color: var(--csd-bg-2); color: var(--csd-text-1); } /* Nav active underline — colored emerald on both themes */ .nav-link.active { color: var(--csd-nav-active); } .nav-link.active::after { background: var(--csd-accent); } /* Header sticky surface — both themes use a variable-driven blurred bar. Light keeps the white tone, dark uses surface-1 with alpha. */ header.bg-white { background-color: var(--csd-header-bg); border-color: var(--csd-header-border); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } /* Sprint 64.10 Block 3 — logo dark/light swap moved from the `filter: brightness(0) invert(1)` hack to dedicated PNG variants (crazysd-logo-dark.png + crazysd-logo-sm-dark.png). Conditional rendering happens in base.html via Tailwind `dark:` utilities. */ /* ── Premium primitives — token-driven, work on both themes ─────── */ .csd-card { background-color: var(--csd-bg-1); border: 1px solid var(--csd-border); border-radius: 1rem; box-shadow: var(--csd-shadow-card); transition: border-color 200ms, background-color 200ms, box-shadow 200ms; } .csd-card:hover { border-color: var(--csd-border-2); box-shadow: var(--csd-shadow-hover); } .csd-ring-accent { box-shadow: 0 0 0 1px var(--csd-border-2), 0 0 24px -8px var(--csd-accent-ring); } .csd-status-pill { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border: 1px solid var(--csd-border-2); background: var(--csd-bg-2); color: var(--csd-text-2); } .csd-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 6px; font-size: 0.6875rem; background: var(--csd-bg-2); border: 1px solid var(--csd-border); color: var(--csd-text-2); } /* Premium hero — subtle gradient + accent dot. Light + dark each get a tuned gradient set via vars. */ .csd-hero { position: relative; background: radial-gradient(ellipse 50% 80% at 0% 0%, var(--csd-accent-soft), transparent 70%), var(--csd-bg-1); border: 1px solid var(--csd-border); border-radius: 1.25rem; padding: 1.5rem 1.75rem; overflow: hidden; box-shadow: var(--csd-shadow-card); } .csd-hero::after { content: ''; position: absolute; right: -20%; top: -50%; width: 60%; height: 200%; background: radial-gradient(ellipse at center, var(--csd-page-gradient-2), transparent 60%); pointer-events: none; } /* Stage stepper node — same shape on both themes */ .csd-stage-node { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid var(--csd-border-2); background: var(--csd-bg-2); color: var(--csd-text-2); transition: all 200ms; } .csd-stage-node.is-current { background: var(--csd-accent-soft); border-color: var(--csd-accent); color: var(--csd-accent); box-shadow: 0 0 24px -4px var(--csd-accent-ring); } .csd-stage-node.is-done { background: rgb(16 185 129 / 0.18); border-color: rgb(16 185 129 / 0.50); color: rgb(5 150 105); } html[data-theme="dark"] .csd-stage-node.is-done { color: rgb(110 231 183); } .csd-stage-node.is-error { background: rgb(248 113 113 / 0.18); border-color: rgb(248 113 113 / 0.50); color: rgb(220 38 38); } html[data-theme="dark"] .csd-stage-node.is-error { color: rgb(252 165 165); } /* Chart styles — token-driven so both themes get matching grid/axis tone */ .csd-chart-grid line { stroke: var(--csd-chart-grid); stroke-width: 1; stroke-dasharray: 2 4; } .csd-chart-axis text { fill: var(--csd-chart-axis); font-size: 10px; font-family: 'JetBrains Mono', monospace; } .csd-chart-line { fill: none; stroke: var(--csd-accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } .csd-chart-dot { fill: var(--csd-accent); } .csd-chart-bar { fill: var(--csd-accent); } .csd-chart-bar.is-warn { fill: var(--csd-warn); } .csd-chart-bar.is-error { fill: var(--csd-error); } /* Utilities */ .csd-divider { height: 1px; background: var(--csd-border); width: 100%; } .csd-muted { color: var(--csd-text-3); } .csd-link { color: var(--csd-accent); text-decoration: none; } .csd-link:hover { color: var(--csd-accent); text-decoration: underline; } /* Theme toggle button — neutral surface in both themes, accent on hover */ .csd-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--csd-text-2); background: transparent; border: 1px solid transparent; transition: background-color 150ms, color 150ms, border-color 150ms, transform 150ms; } .csd-theme-toggle:hover { background: var(--csd-bg-2); color: var(--csd-text-1); border-color: var(--csd-border); } .csd-theme-toggle:active { transform: scale(0.95); } /* Banners — refine on both themes */ [data-test="billing-exhaustion-banner"] { background: linear-gradient(90deg, rgb(220 38 38 / 0.07), transparent 60%); border-color: rgb(220 38 38 / 0.20); } html[data-theme="dark"] [data-test="billing-exhaustion-banner"] { background: linear-gradient(90deg, rgb(248 113 113 / 0.08), transparent 60%); border-color: rgb(248 113 113 / 0.30); } /* Hide everything until a theme is set (FOUC guard). The inline init script in sets data-theme before paint; if for some reason it didn't run, fall back to light after a frame. */ html:not([data-theme]) body { visibility: hidden; } /* ── Sprint 68c — canonical classes for new templates ─────────────── The `html[data-theme="dark"] .bg-white { ... }` remaps above are load-bearing for existing markup. New templates should use these canonical classes — they work identically on light and dark via CSS variables, no remap or !important needed. ─────────────────────────────────────────────────────────────────────── */ .csd-surface-0 { background-color: var(--csd-bg-0); } .csd-surface-1 { background-color: var(--csd-bg-1); } .csd-surface-2 { background-color: var(--csd-bg-2); } .csd-surface-3 { background-color: var(--csd-bg-3); } .csd-fg-1 { color: var(--csd-text-1); } .csd-fg-2 { color: var(--csd-text-2); } .csd-fg-3 { color: var(--csd-text-3); } .csd-border-1 { border-color: var(--csd-border); } .csd-border-strong { border-color: var(--csd-border-2); } /* Solid-fill badges — readable on any surface, both themes. Use instead of `bg-{color}-100 text-{color}-700` pale-tint anti-pattern that fed the Sprint 64.9-13 contrast cycle. */ .csd-badge-emerald { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: var(--csd-accent); color: #ffffff; } .csd-badge-amber { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: var(--csd-warn); color: #ffffff; } .csd-badge-red { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: var(--csd-error); color: #ffffff; } .csd-badge-indigo { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: var(--csd-violet); color: #ffffff; } .csd-badge-slate { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 600; background: var(--csd-bg-3); color: var(--csd-text-2); border: 1px solid var(--csd-border); } /* ───────────────────────────────────────────────────────────────────────── Sprint 100 Phase 4 — Brand UI self-explaining patterns (ТЗ v4.1 §3). Plain CSS (no Tailwind rebuild needed). Help text is ALWAYS visible — never a tooltip — per the self-explaining-UI rule. ───────────────────────────────────────────────────────────────────────── */ .labeled-field { margin-bottom: 1rem; } .field-label { display: block; font-weight: 600; font-size: 0.875rem; color: var(--csd-text-1); margin-bottom: 0.25rem; } .field-help { font-size: 0.78rem; line-height: 1.35; color: var(--csd-text-2); margin-top: 0.3rem; } .field-details, .info-card-explanation { margin-top: 0.35rem; } .field-details > summary, .info-card-explanation > summary { cursor: pointer; font-size: 0.78rem; color: var(--csd-accent, #10b981); user-select: none; } .field-details .details-content, .info-card-explanation .explanation-content { font-size: 0.78rem; line-height: 1.4; color: var(--csd-text-2); margin-top: 0.3rem; padding-left: 0.5rem; border-left: 2px solid var(--csd-border, #e2e8f0); } .playbook-ref { font-size: 0.72rem; color: var(--csd-accent, #10b981); } .info-card { border: 1px solid var(--csd-border, #e2e8f0); border-radius: 0.5rem; padding: 1rem; margin-bottom: 1rem; background: var(--csd-bg-1, #fff); } .info-card-title { font-size: 1rem; font-weight: 700; color: var(--csd-text-1); } .info-card-summary { font-size: 0.82rem; color: var(--csd-text-2); margin-top: 0.15rem; } .info-card-body { margin-top: 0.75rem; } .status-badge { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 0.3rem; } .csd-input { width: 100%; border: 1px solid var(--csd-border, #cbd5e1); border-radius: 0.375rem; padding: 0.4rem 0.6rem; font-size: 0.875rem; background: var(--csd-bg-0, #fff); color: var(--csd-text-1); } .field-warning { font-size: 0.78rem; color: #d97706; margin-top: 0.25rem; }