/* ========================================================================
WHW Design System · theme-whw · v1.3.0 — JEDINÉ téma systému
------------------------------------------------------------------------
Konsolidace pěti dřívějších témat (technical/soft/glow/editorial/
hardware, dostupná na git tagu v0.5.0) do jednoho jazyka.
Syntéza technical + hardware — "lowercase operator":
Z technical (operátorská DNA):
· JetBrains Mono jako UI písmo (--font-body) — identita konzole
· Space Grotesk pro display (logo, h1/h2, card titles)
· tečkovaný grid podklad (schematický feel, subtilnější)
· WHW orange #ff6b00
Z hardware (teenage.engineering zdrženlivost):
· čistě bílé plátno / matná čerň, žádné stíny
· hairline 1px rámy místo 2px černých
· lowercase chrome bez letter-trackingu
· černý primary button — orange vyhrazená stavům, LED, knobům
a aktivním prvkům (v ops UI tak alarmy nesoutěží s tlačítky)
Navíc: akce jako fyzické klávesy ("web jako hardware") — hranaté
keycaps s hairline rámem a 2px spodní hranou, stisk = posun dolů
a zploštění hrany. Vše hranaté, žádné pilulky.
Usage:
Font dependency:
======================================================================== */
:root,
[data-theme="whw"] {
color-scheme: light dark;
/* -- Surface — čistě bílá / matná čerň (z hardware) -- */
--bg: light-dark(#ffffff, #121212);
--bg-card: light-dark(#ffffff, #161616);
--bg-input: light-dark(#f4f4f4, #1f1f1f);
--bg-subtle: light-dark(#fafafa, #181818);
--text: light-dark(#111111, #e8e8e8);
--text-dim: light-dark(#878787, #7d7d7d);
--text-on-strong: light-dark(#ffffff, #111111);
/* -- Strokes — hairline hierarchy (z hardware) -- */
--line-soft: light-dark(#f0f0f0, #232323);
--line: light-dark(#e5e5e5, #2c2c2c);
--line-strong: light-dark(#111111, #d9d9d9);
/* -- Accent — WHW orange, vyhrazená stavům a aktivním prvkům -- */
--accent: #ff6b00;
--accent-ink: #ffffff;
--accent-hover: light-dark(#e55f00, #ff8533);
--accent-soft: light-dark(#fff3ea, #2a1c10);
/* -- Device palette — barvy fyzického zařízení (EP-133 K.O.II vibe:
světle šedý plast + charcoal klávesy + orange potisk; dark mode
= "black edition" téhož zařízení). Stejné hexy platí pro web
i pro 3D tisk / potisk šasi — digital↔physical 1:1. -- */
--hw-chassis: light-dark(#d4d5d2, #1d1d1d); /* šasi / rám */
--key: light-dark(#f1f1ee, #2c2c2c); /* keycap plast */
--key-edge: light-dark(#d6d6d2, #191919); /* spodní hrana keycapu */
--key-hover: light-dark(#e9e9e5, #343434);
--key-ring: light-dark(#111111, #4a4a4a); /* hover obrys */
--key-strong: light-dark(#1d1d1d, #3a3a3a); /* hlavní klávesa */
--key-strong-edge: light-dark(rgba(255,255,255,0.28), #1f1f1f);
--key-strong-ink: light-dark(#ffffff, #ff8533); /* dark: orange potisk */
--key-strong-hover:light-dark(#333333, #444444);
/* -- Brand — černý mark na bílé -- */
--brand: light-dark(#111111, #e8e8e8);
--brand-ink: light-dark(#ffffff, #111111);
/* -- Semantic status — plné, čisté (LED barvy) -- */
--success: #1db954;
--warning: #f5a623;
--danger: #e02b2b;
--info: #2f7ff6;
--neutral: light-dark(#b5b5b5, #5d5d5d);
--success-soft: light-dark(#ebf8f0, #10241a);
--warning-soft: light-dark(#fdf5e6, #271d0c);
--danger-soft: light-dark(#fdeded, #271111);
--info-soft: light-dark(#ebf2fd, #101b2b);
/* -- Domain accents -- */
--dom-blue: #2f7ff6;
--dom-green: #1db954;
--dom-purple: #8b5cf6;
--dom-amber: #f5a623;
--dom-cyan: #06b6d4;
--dom-red: #e02b2b;
/* -- Shadows — flat (z hardware) -- */
--shadow-sm: none;
--shadow: light-dark(0 1px 4px rgba(0,0,0,0.05), 0 1px 4px rgba(0,0,0,0.4));
--shadow-lg: light-dark(0 8px 28px rgba(0,0,0,0.10), 0 8px 28px rgba(0,0,0,0.55));
/* -- Typography — operátorská DNA z technical:
mono UI + Space Grotesk display -- */
--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);
--font-display: var(--font-sans);
--font-italic: Georgia, 'Times New Roman', serif;
/* -- Edges — hard (karty/panely); akce jsou pilulky (overrides níže) -- */
--radius-sm: 0;
--radius-md: 0;
--radius-lg: 0;
/* -- Spacing -- */
--space-xs: 0.25rem;
--space-sm: 0.5rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2.5rem;
/* -- Dimensions — hustota z technical -- */
--input-height: 34px;
--col-left: 300px;
--col-right: 360px;
--col-left-md: 264px;
--col-right-md: 320px;
/* -- Layout & chrome — hairline -- */
--header-pad: 0.85rem 1.5rem;
--header-border: 1px solid var(--line);
--panel-border: 1px solid var(--line);
/* -- Grid podklad — tečky z technical, subtilnější -- */
--grid-image: radial-gradient(var(--line) 1px, transparent 1px);
--grid-size: 32px 32px;
--grid-opacity: light-dark(0.25, 0.12);
/* -- Code preview — vždy dark (DS konvence) -- */
--code-bg: #0f0f0f;
--code-fg: #e6e6e6;
/* -- Hero — Space Grotesk, tišší než technical -- */
--hero-padding-y: 4.5rem;
--hero-padding-x: 0;
--hero-gap: 2.5rem;
--hero-title-font: var(--font-display);
--hero-title-weight: 600;
--hero-title-size: clamp(1.9rem, 4vw, 3rem);
--hero-title-leading: 1.08;
--hero-title-tracking: -0.02em;
--hero-lede-size: 0.85rem;
--hero-visual-size: 400px;
--hero-iso-rotate: rotateX(58deg) rotateZ(-45deg);
--hero-iso-layer-radius: 0;
}
/* ========================================================================
Component overrides — hardware zdrženlivost na mono kostře.
======================================================================== */
/* -- lowercase chrome, tracking zrušený (mono lowercase = TE spec sheet) -- */
[data-theme="whw"] .c-nav__link,
[data-theme="whw"] .c-btn,
[data-theme="whw"] .c-badge,
[data-theme="whw"] .c-field__label,
[data-theme="whw"] .c-panel__head h3,
[data-theme="whw"] .c-seg button,
[data-theme="whw"] .c-tabs button,
[data-theme="whw"] .u-breadcrumb,
[data-theme="whw"] .c-logo-tag,
[data-theme="whw"] .c-ctx__section h5,
[data-theme="whw"] .c-cmds__group h5,
[data-theme="whw"] .c-msg__who,
[data-theme="whw"] .c-table thead th,
[data-theme="whw"] .c-section-head__eyebrow,
[data-theme="whw"] .c-lane__kind,
[data-theme="whw"] .c-advanced summary,
[data-theme="whw"] .c-hero__iso-layer {
text-transform: lowercase;
letter-spacing: 0.03em;
}
[data-theme="whw"] .c-logo { text-transform: lowercase; letter-spacing: -0.5px; }
[data-theme="whw"] .c-card[data-id]::before { text-transform: lowercase; letter-spacing: 0.05em; }
/* -- Akce = fyzické klávesy ("web jako hardware") --------------------
Hranatý keycap: hairline rám + 2px spodní vnitřní hrana (reliéf).
Stisk (:active, core dělá translateY(1px)) hranu zploští — klávesa
"zajede". Radius 0 přichází z tokenů, žádný override netřeba. -- */
[data-theme="whw"] .c-btn {
background: var(--key);
color: var(--text);
box-shadow:
inset 0 0 0 1px var(--line),
inset 0 -2px 0 var(--key-edge);
padding: 0 14px;
}
[data-theme="whw"] .c-btn:hover {
background: var(--key-hover);
box-shadow:
inset 0 0 0 1px var(--key-ring),
inset 0 -2px 0 var(--key-edge);
}
[data-theme="whw"] .c-btn:active {
box-shadow: inset 0 0 0 1px var(--key-ring); /* hrana zmizí = stisknuto */
}
[data-theme="whw"] .c-btn--icon { padding: 0; color: var(--text-dim); } /* plné glyphy (▶ ■) nesvítí */
[data-theme="whw"] .c-btn--icon:hover { color: var(--text); }
[data-theme="whw"] .c-btn--ghost { background: transparent; box-shadow: none; }
[data-theme="whw"] .c-btn--ghost:hover { background: var(--key); box-shadow: none; }
/* -- Primary = hlavní klávesa zařízení. Light: charcoal s bílým
potiskem; dark: šedý plast s ORANGE potiskem (jako TE black
edition) — žádná bílá plocha v dark. -- */
[data-theme="whw"] .c-btn--primary {
background: var(--key-strong); color: var(--key-strong-ink);
box-shadow: inset 0 -2px 0 var(--key-strong-edge);
}
[data-theme="whw"] .c-btn--primary:hover {
background: var(--key-strong-hover);
box-shadow: inset 0 -2px 0 var(--key-strong-edge);
}
[data-theme="whw"] .c-btn--primary:active { box-shadow: none; }
[data-theme="whw"] .c-btn--danger {
box-shadow: inset 0 0 0 1px var(--danger-soft), inset 0 -2px 0 var(--danger-soft);
}
/* armed = the one orange keycap (commit / e-stop / run-active) */
[data-theme="whw"] .c-btn--armed { background: var(--accent); color: var(--accent-ink); }
[data-theme="whw"] .c-btn--armed:hover:not(:disabled) { background: var(--accent-hover); }
/* -- Seg = řada kláves, aktivní zamáčknutá (key-strong, ne inverze
do bílé) -- */
[data-theme="whw"] .c-seg {
background: transparent;
padding: 0;
box-shadow: inset 0 0 0 1px var(--line);
}
[data-theme="whw"] .c-seg button.is-on {
background: var(--key-strong); color: var(--key-strong-ink);
box-shadow: none;
}
/* -- Inverzní drobnosti — v dark nesmí svítit bíle -- */
[data-theme="whw"] .c-badge--count { background: var(--key-strong); color: var(--key-strong-ink); }
/* -- Tabs — tečka místo underline -- */
[data-theme="whw"] .c-tabs button.is-on::after {
left: 50%; right: auto; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: 50%; bottom: 4px;
}
/* -- Tabulky — hairline řádky bez zebry -- */
[data-theme="whw"] .c-table tbody tr:nth-child(even) { background: transparent; }
[data-theme="whw"] .c-table thead th {
background: transparent;
border-bottom: 1px solid var(--line-strong);
font-weight: 600; color: var(--text-dim);
}
[data-theme="whw"] .c-table tbody td { border-bottom: 1px dashed var(--line); }
/* -- Logo mark — ostrý černý čtverec (potisk na šasi) -- */
[data-theme="whw"] .c-logo-mark { border-radius: 0; }