/* ═══════════════════════════════════════════════════════════════════════ 10-themes.css — THEME DEFINITIONS ═══════════════════════════════════════════════════════════════════════ Each theme is a body[data-theme="NAME"] selector that overrides tokens from 00-tokens.css. Theme changes require ZERO HTML / JS / component edits — only CSS variable overrides. Production themes (also catalogued in config/theme_registry.json): - clean-light (light, white + navy + electric blue, default) - ai-neural (dark, indigo developer) TO ADD A NEW THEME (canonical 2-step flow): 1. Append an entry to config/theme_registry.json `themes`. 2. Add a `body[data-theme=""] { ... }` block below. Override ONLY the canonical tokens you want changed (from 00-tokens.css). DO NOT introduce new --custom-* tokens — components consume the canonical set, and a one-off token will not theme-switch correctly. ⚠️ A DARK theme MUST ALSO override the SEMANTIC families --color-{success,warn,danger,info,neutral}-{fg,bg,border,solid} + --color-text-link + --color-focus-ring + --color-surface-overlay. The 00-tokens LIGHT defaults (#047857 / #B91C1C …) are dark text and render ~2:1 on a dark surface — every .pill/.chip/.badge/.status-msg consumes these CANONICAL names directly (legacy --tone-* dark-tuning in 60-base does NOT reach them). See the ai-neural SEMANTIC block (7 Jun 2026) for proven dark values. No JS / HTML / Python edits required — registry-driven everywhere. DO NOT put component styling here — those live in 20-components.css. ═══════════════════════════════════════════════════════════════════════ */ @layer themes { /* ═════════════════════════════════════════════════════════════════════ CLEAN LIGHT — modern fintech-grade aesthetic • Crisp white surfaces, very subtle off-white page bg • Deep navy text — high contrast, trustworthy • Electric-blue brand (#3395ff) with navy-purple hero gradient • Soft 1px borders, layered light shadows (no heavy blur) • Inter typography, slightly tighter tracking on headings ═════════════════════════════════════════════════════════════════════ */ body[data-theme="clean-light"] { /* Page surrounds */ --color-bg: #ffffff; --color-bg-alt: #f7f8fa; --color-bg-image: radial-gradient(ellipse at 0% 0%, rgba(51, 149, 255, 0.05), transparent 40%), radial-gradient(ellipse at 100% 0%, rgba(108, 99, 255, 0.04), transparent 40%); /* Cards / surfaces — pure white with crisp borders, no glassmorphism */ --color-surface-card: #ffffff; --color-surface-card-hover: #fafbfc; --color-surface-section: #ffffff; --color-surface-elevated: #ffffff; --color-surface-overlay: rgba(11, 31, 68, 0.50); --color-surface-input: #ffffff; --color-surface-input-hover: #fafbfc; --color-surface-hover: rgba(51, 149, 255, 0.06); --color-surface-active: rgba(51, 149, 255, 0.12); --color-surface-disabled: #f4f5f7; /* Text — deep navy hierarchy (Razorpay's signature) */ --color-text-heading: #0b1f44; --color-text-body: #14224b; --color-text-muted: #5a6480; --color-text-dim: #7a8299; --color-text-soft: #aab1c2; --color-text-brand: #3395ff; --color-text-on-solid: #ffffff; --color-text-on-brand: #ffffff; --color-text-link: #3395ff; --color-text-link-hover: #1f7ae0; --color-text-disabled: #aab1c2; /* Brand — electric blue with deep-navy active, purple accent */ --color-brand: #3395ff; --color-brand-hover: #1f7ae0; --color-brand-active: #0b1f44; --color-brand-soft: rgba(51, 149, 255, 0.10); --color-brand-soft-border: rgba(51, 149, 255, 0.30); --color-accent: #6c63ff; --color-accent-soft: rgba(108, 99, 255, 0.10); /* Borders — soft 1px gridlines (very Razorpay) */ --color-border-default: #e6e8ec; --color-border-subtle: #f0f2f5; --color-border-strong: #d4d8df; --color-border-input: #d4d8df; --color-border-input-hover: #3395ff; --color-border-input-focus: var(--color-brand); --color-border-accent: var(--color-brand); /* Semantic — fintech-style (success green stays bold; danger crisp red) */ --color-success-fg: #00a86b; --color-success-bg: rgba(0, 168, 107, 0.08); --color-success-border: rgba(0, 168, 107, 0.28); --color-success-solid: #00a86b; --color-success-solid-hover: #00925b; --color-warn-fg: #b45309; --color-warn-bg: rgba(245, 158, 11, 0.10); --color-warn-border: rgba(245, 158, 11, 0.30); --color-warn-solid: #f59e0b; --color-warn-solid-hover: #d97706; --color-danger-fg: #d22f3a; --color-danger-bg: rgba(230, 57, 70, 0.08); --color-danger-border: rgba(230, 57, 70, 0.28); --color-danger-solid: #e63946; --color-danger-solid-hover: #c92a36; --color-info-fg: #1f7ae0; --color-info-bg: rgba(51, 149, 255, 0.08); --color-info-border: rgba(51, 149, 255, 0.30); --color-info-solid: #3395ff; --color-info-solid-hover: #1f7ae0; --color-neutral-fg: #5a6480; --color-neutral-bg: rgba(90, 100, 128, 0.06); --color-neutral-border: rgba(90, 100, 128, 0.20); --color-neutral-solid: #5a6480; --color-neutral-solid-hover: #44506d; /* Focus + shadows — slightly bumped for better card definition on white */ --color-focus-ring: rgba(51, 149, 255, 0.32); --shadow-xs: 0 1px 2px rgba(11, 31, 68, 0.06); --shadow-sm: 0 1px 3px rgba(11, 31, 68, 0.08), 0 1px 2px rgba(11, 31, 68, 0.05); --shadow-md: 0 6px 16px rgba(11, 31, 68, 0.10), 0 1px 3px rgba(11, 31, 68, 0.06); --shadow-lg: 0 12px 28px rgba(11, 31, 68, 0.12), 0 2px 6px rgba(11, 31, 68, 0.06); --shadow-xl: 0 24px 48px rgba(11, 31, 68, 0.14); --shadow-2xl: 0 32px 64px rgba(11, 31, 68, 0.18); --shadow-glow-brand: 0 0 0 4px rgba(51, 149, 255, 0.20); /* Razorpay-style hero gradient — for use on hero / promo surfaces */ --color-hero-gradient: linear-gradient(135deg, #0b1f44 0%, #1e3a8a 38%, #6c63ff 100%); /* Legacy bridge — old --bg / --card-bg / --tone-* consumers */ --bg: var(--color-bg); --card-bg: var(--color-surface-card); --card-border: var(--color-border-default); --text: var(--color-text-body); --text-muted: var(--color-text-muted); --text-dim: var(--color-text-dim); --hover-bg: var(--color-surface-hover); --section-bg: var(--color-surface-section); --popover-bg: var(--color-surface-elevated); --footer-text: var(--color-text-muted); --input-bg: var(--color-surface-input); --input-border: var(--color-border-input); /* Surface + border shorthand tokens — used by component CSS without fallbacks */ --surface: var(--color-surface-card); --surface-raised: var(--color-surface-card-hover); --surface-dim: var(--color-bg-alt); --border: var(--color-border-default); /* Header bar — solid white with crisp bottom-border separation */ --header-grad-start: #ffffff; --header-grad-end: #ffffff; --header-link: var(--color-text-body); --header-link-hover-bg: var(--color-surface-hover); --header-link-active-bg: var(--color-surface-active); --header-link-active-text: var(--color-brand); --header-control-bg: #ffffff; --header-control-border: var(--color-border-default); --header-control-text: var(--color-text-body); --brand-accent: var(--color-brand); --theme-glow: radial-gradient(ellipse at 0% 0%, rgba(51, 149, 255, 0.05) 0%, transparent 40%), radial-gradient(ellipse at 100% 0%, rgba(108, 99, 255, 0.04) 0%, transparent 40%); /* Tone bridge — for any leftover --tone-* consumers in legacy CSS */ --tone-success-fg: var(--color-success-fg); --tone-success-bg: var(--color-success-bg); --tone-success-border: var(--color-success-border); --tone-warn-fg: var(--color-warn-fg); --tone-warn-bg: var(--color-warn-bg); --tone-warn-border: var(--color-warn-border); --tone-danger-fg: var(--color-danger-fg); --tone-danger-bg: var(--color-danger-bg); --tone-danger-border: var(--color-danger-border); --tone-info-fg: var(--color-info-fg); --tone-info-bg: var(--color-info-bg); --tone-info-border: var(--color-info-border); --tone-neutral-fg: var(--color-neutral-fg); --tone-neutral-bg: var(--color-neutral-bg); --tone-neutral-border: var(--color-neutral-border); /* Typography refinement — Razorpay tightens headings */ --tracking-tight: -0.018em; --leading-tight: 1.15; } /* ───────────────────────────────────────────────────────────────────── AI NEURAL — dark indigo developer theme (preserved). ───────────────────────────────────────────────────────────────────── */ body[data-theme="ai-neural"] { --bg: #070a10; --card-bg: #0d1117; --card-border: rgba(99,102,241,0.22); --text: #e2e8f0; --text-muted: #94a3b8; --text-dim: #64748b; --hover-bg: rgba(99,102,241,0.06); --section-bg: #0d1117; --popover-bg: #0d1117; --footer-text: #334155; --input-bg: #070a10; --input-border: rgba(99,102,241,0.28); --header-grad-start: #0d1117; --header-grad-end: #13111c; --header-link: rgba(199,210,254,0.75); --header-link-hover-bg: rgba(99,102,241,0.12); --header-link-active-bg: rgba(99,102,241,0.22); --header-link-active-text: #a5b4fc; --header-control-bg: rgba(99,102,241,0.10); --header-control-border: rgba(99,102,241,0.25); --header-control-text: rgba(199,210,254,0.85); --brand-accent: #818cf8; --theme-glow: radial-gradient(ellipse at 15% 0%, rgba(99,102,241,0.10) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(168,85,247,0.07) 0%, transparent 55%); /* Surface + border shorthand tokens */ --surface: var(--color-surface-card); --surface-raised: var(--color-surface-card-hover); --surface-dim: var(--color-bg-alt); --border: var(--color-border-default); --color-text-on-solid: #ffffff; /* Canonical token bridge — ensures 20-components.css consumers theme-switch */ --color-bg: #070a10; --color-bg-alt: #0a0d14; --color-surface-card: #0d1117; --color-surface-card-hover: #111722; --color-surface-section: #0d1117; --color-surface-elevated: #111722; --color-surface-input: #070a10; --color-surface-input-hover: #0d1117; --color-surface-hover: rgba(99,102,241,0.06); --color-surface-active: rgba(99,102,241,0.12); --color-surface-disabled: #0d1117; --color-text-heading: #e2e8f0; --color-text-body: #e2e8f0; --color-text-muted: #94a3b8; --color-text-dim: #64748b; --color-text-soft: #475569; --color-text-brand: #a5b4fc; --color-text-disabled: #475569; --color-border-default: rgba(99,102,241,0.22); --color-border-strong: rgba(99,102,241,0.40); --color-border-input: rgba(99,102,241,0.28); --color-border-input-hover: rgba(99,102,241,0.55); --color-border-subtle: rgba(99,102,241,0.12); --color-brand: #818cf8; --color-brand-hover: #6366f1; --color-brand-soft: rgba(99,102,241,0.10); --color-brand-soft-border: rgba(99,102,241,0.28); /* ── Dark-theme solid primary fix (3 Jun 2026) ─────────────────────── The site-wide primary button (e.g. "Review pending actions") + the sidebar Admin/Seller persona active tab resolve to `--brand-accent`, which in this theme is a LIGHT periwinkle (#818cf8). White text on it is low-contrast on the near-black surface — the reported "doesn't show good" bug. (The info "Open" button uses a darker solid, which is why it always looked fine.) `--color-primary-solid` is consumed by .btn-primary (20-components.css + component-pipeline-view.css) and the persona/mkt active tab (60-dashboard-base.css), all with a `--brand-accent` fallback so the LIGHT theme is unchanged. Here we give it a saturated indigo that pops on near-black AND keeps white text crisp (≈7:1). One change → every primary button + persona tab across the site, black theme only. */ --color-primary-solid: #4f46e5; /* indigo-600 — white text ≈7:1 */ --color-primary-solid-hover: #4338ca; /* indigo-700 */ --color-primary-solid-active: #3730a3; /* indigo-800 */ /* ── Dark-theme CANONICAL semantic families (7 Jun 2026) ────────────── ROOT-CAUSE fix: components in 20-components.css (.pill-*/.chip/.badge/ .btn-soft-*/.btn-success|warn|danger|info) + 40-states.css (.status-msg.is-*/.notice.is-*/.g24-bar) consume the CANONICAL --color-{success,warn,danger,info,neutral}-{fg,bg,border,solid}. The ai-neural block overrode NONE, so they fell back to the 00-tokens LIGHT base (#047857 / #0369A1 / #B91C1C rendered as text -> ~2:1 over the near-black #0d1117 surface = the "text colors wrong in dark theme" bug). fg/bg/border mirror the proven dark --tone-* values already shipped in 60-dashboard-base.css. One block -> every pill / chip / badge / status / soft-button readable in dark mode site-wide. Light theme is byte-for-byte unchanged (override scoped to body[data-theme="ai-neural"]). */ --color-success-fg: #86EFAC; --color-success-bg: rgba(34,197,94,0.18); --color-success-border: rgba(34,197,94,0.34); --color-warn-fg: #FCD34D; --color-warn-bg: rgba(245,158,11,0.18); --color-warn-border: rgba(245,158,11,0.34); --color-danger-fg: #FCA5A5; --color-danger-bg: rgba(239,68,68,0.18); --color-danger-border: rgba(239,68,68,0.34); --color-info-fg: #93C5FD; --color-info-bg: rgba(59,130,246,0.18); --color-info-border: rgba(96,165,250,0.34); --color-neutral-fg: #CBD5E1; --color-neutral-bg: rgba(148,163,184,0.14); --color-neutral-border: rgba(148,163,184,0.28); --color-success-solid: #16a34a; --color-success-solid-hover: #15803d; --color-warn-solid: #f59e0b; --color-warn-solid-hover: #d97706; --color-danger-solid: #dc2626; --color-danger-solid-hover: #b91c1c; --color-info-solid: #2563eb; --color-info-solid-hover: #1d4ed8; --color-neutral-solid: #475569; --color-neutral-solid-hover: #334155; --color-text-link: #a5b4fc; --color-text-link-hover: #c7d2fe; --color-focus-ring: rgba(129,140,248,0.55); --color-surface-overlay: rgba(0,0,0,0.62); } } /* @layer themes */