/* ========================================================================
WHW Design System · theme-technical · v0.2.0
------------------------------------------------------------------------
Industrial / technical look extracted from WHW Box v04.
JetBrains Mono + Space Grotesk, WHW corporate orange, light+dark
via CSS light-dark(), dotted grid background, hard geometric edges.
Usage:
Font dependency:
======================================================================== */
:root,
[data-theme="technical"] {
color-scheme: light dark;
/* -- Surface & ink -- */
--bg: light-dark(#f5f5f5, #1a1d21);
--bg-card: light-dark(#ffffff, #22262b);
--bg-input: light-dark(#f5f5f5, #1a1d21);
--bg-subtle: light-dark(#fafafa, #1e2127);
--text: light-dark(#1a1a1a, #e0e0e0);
--text-dim: light-dark(#666666, #888888);
--text-on-strong: light-dark(#f5f5f5, #e0e0e0);
/* -- Strokes: 3-tier hierarchy -- */
--line-soft: light-dark(#ececec, #2d3139); /* 1px subtle divider */
--line: light-dark(#d4d4d4, #3a3f45); /* 1px default divider */
--line-strong: light-dark(#1a1a1a, #4a4f55); /* 2px outer container */
/* -- Accent (WHW orange) -- */
--accent: #ff6b00;
--accent-ink: #ffffff;
--accent-hover: light-dark(#e55f00, #ff8533);
--accent-soft: light-dark(#fff4eb, #2a1f14);
/* -- Brand mark color (logo) -- */
--brand: light-dark(#0066cc, #ff6b00);
--brand-ink: #ffffff;
/* -- Semantic status colors -- */
--success: #22c55e;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
--neutral: light-dark(#a0a0a0, #666666);
--success-soft: light-dark(#e8f6ee, #132019);
--warning-soft: light-dark(#fff7e6, #24190a);
--danger-soft: light-dark(#fdecec, #241212);
--info-soft: light-dark(#eaf2fd, #121c28);
/* -- Domain accents (for multi-domain apps: ontology, flow diagrams) -- */
--dom-blue: #3b82f6;
--dom-green: #22c55e;
--dom-purple: #8b5cf6;
--dom-amber: #f59e0b;
--dom-cyan: #06b6d4;
--dom-red: #ef4444;
/* -- Shadows -- */
--shadow-sm: light-dark(0 1px 2px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.2));
--shadow: light-dark(0 2px 8px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.3));
--shadow-lg: light-dark(0 8px 24px rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.45));
/* -- Typography --
Three roles:
--font-sans display only (logo, h1, h2, card titles)
--font-body UI chrome (buttons, labels, body) — themable
--font-mono genuine monospace (code, YAML, kbd, slash commands) */
--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;
--font-body: var(--font-mono); /* Technical theme = mono UI = its identity */
/* -- Radii: near-zero, industrial feel -- */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
/* -- Spacing scale -- */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
/* -- Component heights / dimensions -- */
--input-height: 36px;
--col-left: 300px;
--col-right: 360px;
--col-left-md: 264px;
--col-right-md: 320px;
/* -- Layout & chrome -- */
--header-pad: 0.85rem 1.5rem;
--header-border: 1px solid var(--line);
--panel-border: 2px solid var(--line-strong);
/* -- Grid background: dots (industrial schematic feel) -- */
--grid-image: radial-gradient(var(--line) 1px, transparent 1px);
--grid-size: 32px 32px;
--grid-opacity: light-dark(0.3, 0.15);
/* -- Code / YAML preview — always dark across all WHW themes.
Convention: code blocks stay dark even in light themes for
syntax-highlight readability and consistency (Tailwind / Vercel /
GitHub docs convention). -- */
--code-bg: #0f1114;
--code-fg: #e6e6e6;
}
/* Manual mode overrides via data-mode attribute */
[data-mode="light"] { color-scheme: light; }
[data-mode="dark"] { color-scheme: dark; }