/* ============================================================================ LopoRail — "Signal Black" · colors & type foundations ---------------------------------------------------------------------------- Reusable foundation for any LopoRail surface. Extracted verbatim from the source theme's source of truth: wp-content/themes/loporail/assets/rail.css (the `:root` + `[data-theme="light"]` token blocks and the 25 `.zone-*` rooms). If this file and rail.css ever diverge, rail.css wins. Rules carried over from the source system: - Colour is oklch() / color-mix() only. No raw hex anywhere, ever. - One accent family (violet → magenta → amber). Gradient ink is --on-accent (dark). Never white on the gradient. - A section may change the SIGNAL by adding one `.zone-*` class; it may not re-declare colours on elements. - Every value has a [data-theme="light"] twin; daylight is a first-class peer. - Spacing sits on an 8pt-ish grid; radii are 12 / 24 / pill. Space Grotesk is self-hosted (see assets/fonts.css — SIL OFL 1.1). ========================================================================== */ /* sRGB reference (shown for interoperability / range checks ONLY — never author colour with hex; the declarations below are the single source of truth): --bg #07080d · --surface #0f1017 · --surface-2 #181a22 · --fg #f4f5f9 --muted #a1a4af · --border #262831 · --border-strong #6b6e7b --accent #f554ca · --accent-2 #8a77ff · --accent-3 #fc9e47 --on-accent #0a0b10 · --ok #49de78 · --warn #f7b83d · --danger #ff5f5b --info #63b9fe · --press #c92324 · --gauge #15ad6e · --banner #c4087a */ /* ── tokens · signal black (default theme) ──────────────────────────────── */ :root { color-scheme: dark; /* six core tokens — near-black ground, lamp-white ink, electric signal */ --bg: oklch(13.5% 0.012 275); --surface: oklch(17.5% 0.014 275); --surface-2: oklch(22% 0.016 275); --fg: oklch(97% 0.006 275); --muted: oklch(72% 0.016 275); --border: oklch(28% 0.016 275); --border-strong: oklch(54% 0.02 275); --control-active: oklch(30% 0.018 275); /* electric signal — one hue plus a gradient built from its family */ --accent: oklch(70% 0.23 340); --accent-2: oklch(66% 0.21 285); --accent-3: oklch(78% 0.15 60); --on-accent: oklch(15% 0.012 275); --grad: linear-gradient(96deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-3) 100%); /* derived — never hardcode a colour elsewhere */ --accent-soft: color-mix(in oklch, var(--accent) 15%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 6%, transparent); --surface-soft: color-mix(in oklch, var(--surface) 82%, transparent); /* operational state — signalling lamps, outside the accent budget */ --ok: oklch(80% 0.19 150); --ok-soft: color-mix(in oklch, var(--ok) 15%, var(--surface)); --warn: oklch(82% 0.15 80); --warn-soft: color-mix(in oklch, var(--warn) 16%, var(--surface)); --danger: oklch(70% 0.20 25); --danger-soft: color-mix(in oklch, var(--danger) 16%, var(--surface)); --info: oklch(76% 0.13 245); --info-soft: color-mix(in oklch, var(--info) 15%, var(--surface)); /* area identities — the press desk red and the model-bench green, each with its own ink so a filled segment keeps contrast in either theme */ --press: oklch(54% 0.20 27); --press-ink: oklch(99% 0.004 275); --press-soft: color-mix(in oklch, var(--press) 16%, transparent); --gauge: oklch(66% 0.15 158); --gauge-ink: oklch(15% 0.012 275); --gauge-soft: color-mix(in oklch, var(--gauge) 16%, transparent); /* site-wide notice banner — fixed brand magenta (white ink ≈ 5.8:1 AA) */ --banner: oklch(54% 0.22 353); --banner-ink: oklch(100% 0 0); /* elevation + glow — reserved for floating layers and live moments */ --shadow-1: 0 1px 0 color-mix(in oklch, var(--fg) 5%, transparent); --shadow-2: 0 34px 90px -44px color-mix(in oklch, var(--accent) 70%, transparent); --shadow-btn: 0 12px 34px -12px color-mix(in oklch, var(--accent) 70%, transparent); --glow: 0 0 0 1px color-mix(in oklch, var(--accent) 34%, transparent), 0 18px 46px -16px color-mix(in oklch, var(--accent) 62%, transparent); /* type */ --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace; /* scale — canonical = the brand kit (owner ruling 2026-10-12) */ --fs-h1: clamp(44px, 6.6vw, 96px); --fs-h2: clamp(32px, 4.6vw, 64px); --fs-h3: clamp(22px, 2vw, 28px); --fs-h4: clamp(20px, 2.2vw, 28px); --fs-lead: clamp(16px, 1.4vw, 20px); --fs-body: 16px; --fs-meta: 12px; /* 8-pt spacing grid */ --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px; --gap-xl: 56px; --gap-2xl: 96px; --container: 1220px; --gutter: 32px; --radius: 12px; --radius-lg: 24px; --radius-pill: 999px; } /* ── theme · daylight ───────────────────────────────────────────────────── */ [data-theme="light"] { color-scheme: light; --bg: oklch(98.5% 0.004 275); --surface: oklch(100% 0 0); --surface-2: oklch(96.5% 0.006 275); --fg: oklch(20% 0.02 275); --muted: oklch(46% 0.02 275); --border: oklch(90% 0.008 275); --border-strong: oklch(54% 0.02 275); --control-active: oklch(100% 0 0); --accent: oklch(56% 0.22 340); --accent-2: oklch(52% 0.20 285); --accent-3: oklch(58% 0.16 55); --on-accent: oklch(99% 0.004 275); --ok: oklch(52% 0.13 152); --warn: oklch(50% 0.14 65); --danger: oklch(52% 0.20 25); --info: oklch(46% 0.13 250); --accent-soft: color-mix(in oklch, var(--accent) 8%, transparent); --fg-soft: color-mix(in oklch, var(--fg) 5%, transparent); --surface-soft: color-mix(in oklch, var(--surface) 86%, transparent); --ok-soft: color-mix(in oklch, var(--ok) 8%, var(--surface)); --warn-soft: color-mix(in oklch, var(--warn) 8%, var(--surface)); --danger-soft: color-mix(in oklch, var(--danger) 8%, var(--surface)); --info-soft: color-mix(in oklch, var(--info) 8%, var(--surface)); --press: oklch(48% 0.19 27); --press-ink: oklch(99% 0.004 275); --press-soft: color-mix(in oklch, var(--press) 8%, transparent); --gauge: oklch(46% 0.13 158); --gauge-ink: oklch(99% 0.004 275); --gauge-soft: color-mix(in oklch, var(--gauge) 8%, transparent); --shadow-1: 0 1px 2px color-mix(in oklch, var(--fg) 8%, transparent); --shadow-2: 0 34px 80px -46px color-mix(in oklch, var(--fg) 42%, transparent); --shadow-btn: 0 12px 30px -14px color-mix(in oklch, var(--accent) 55%, transparent); --glow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent), 0 16px 40px -18px color-mix(in oklch, var(--accent) 48%, transparent); } /* ============================================================================ ROLE ALIASES · an optional presentation layer mapping intent → palette token. These are NOT new colours and are NOT in the source theme (`rail.css`); they only rename an existing token so components can express intent without referencing raw scale names. Both themes resolve automatically because the aliases point at the token, not a value. Prefer these in new components. ========================================================================== */ :root { --role-ground: var(--bg); /* page background */ --role-raised: var(--surface); /* cards, panels, tiles */ --role-control: var(--surface-2); /* inset tracks, control chrome */ --role-ink: var(--fg); /* primary text + icons */ --role-ink-2: var(--muted); /* secondary text, meta */ --role-hairline: var(--border); /* dividers, card borders */ --role-hairline-2: var(--border-strong); /* emphasis borders, input outline */ --role-action: var(--accent); /* links, active marks, the signal */ --role-action-ink: var(--on-accent); /* ink ON the gradient (always dark/twin) */ --role-action-grad: var(--grad); /* the single decisive action */ --role-focus: var(--accent); /* focus-visible ring */ --role-on-time: var(--ok); --role-delayed: var(--warn); --role-disruption: var(--danger); --role-info: var(--info); } /* ============================================================================ ROOMS · each `.zone-*` restates only its signal; everything else inherits. Map (zone → accent hue): heritage 100 · press 27 · gauge 158 · partners 90 · performance 195 · station 240 · community 110 · spotting 55 · blog 300 · museum 178 · historical 85 · rollingstock 255 · market 330 · structures 128 · miles 170 · org 240 · departures 78 · journey 210 · diagrams 230 · cameras 12 · jobs 218 · compositions 280 · freight 41 · developer 150 · account (base signal — no dedicated hue). ========================================================================== */ /* Shared derivation: every room gets its gradient, soft wash and glow from its own accent trio, so a new room only has to declare four values. */ [class*="zone-"] { --grad: linear-gradient(96deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-3) 100%); --accent-soft: color-mix(in oklch, var(--accent) 15%, transparent); --shadow-2: 0 34px 90px -44px color-mix(in oklch, var(--accent) 70%, transparent); --shadow-btn: 0 12px 34px -12px color-mix(in oklch, var(--accent) 70%, transparent); --glow: 0 0 0 1px color-mix(in oklch, var(--accent) 34%, transparent), 0 18px 46px -16px color-mix(in oklch, var(--accent) 62%, transparent); } [data-theme="light"] [class*="zone-"] { --accent-soft: color-mix(in oklch, var(--accent) 8%, transparent); --shadow-2: 0 34px 80px -46px color-mix(in oklch, var(--fg) 42%, transparent); --shadow-btn: 0 12px 30px -14px color-mix(in oklch, var(--accent) 55%, transparent); --glow: 0 0 0 1px color-mix(in oklch, var(--accent) 30%, transparent), 0 16px 40px -18px color-mix(in oklch, var(--accent) 48%, transparent); } .zone-heritage { --accent: oklch(86% 0.15 100); --accent-2: oklch(78% 0.13 190); --accent-3: oklch(72% 0.20 300); --on-accent: oklch(18% 0.02 100); } .zone-press { --accent: oklch(68% 0.20 27); --accent-2: oklch(62% 0.205 8); --accent-3: oklch(80% 0.15 65); --on-accent: oklch(15% 0.012 250); } .zone-gauge { --accent: oklch(72% 0.15 158); --accent-2: oklch(64% 0.13 195); --accent-3: oklch(80% 0.13 120); --on-accent: oklch(16% 0.014 165); } .zone-partners { --accent: oklch(84% 0.10 90); --accent-2: oklch(66% 0.14 265); --accent-3: oklch(80% 0.13 200); --on-accent: oklch(22% 0.03 80); } .zone-performance{ --accent: oklch(78% 0.13 195); --accent-2: oklch(70% 0.15 225); --accent-3: oklch(82% 0.12 165); --on-accent: oklch(16% 0.02 235); } .zone-station { --accent: oklch(72% 0.15 240); --accent-2: oklch(64% 0.16 275); --accent-3: oklch(80% 0.12 200); --on-accent: oklch(15% 0.03 255); } .zone-community { --accent: oklch(86% 0.17 110); --accent-2: oklch(70% 0.20 300); --accent-3: oklch(80% 0.17 350); --on-accent: oklch(18% 0.02 110); } .zone-spotting { --accent: oklch(74% 0.17 55); --accent-2: oklch(64% 0.18 30); --accent-3: oklch(84% 0.13 95); --on-accent: oklch(18% 0.02 50); } .zone-blog { --accent: oklch(76% 0.14 300); --accent-2: oklch(66% 0.15 265); --accent-3: oklch(82% 0.10 345); --on-accent: oklch(17% 0.02 300); } .zone-museum { --accent: oklch(76% 0.14 178); --accent-2: oklch(88% 0.06 155); --accent-3: oklch(78% 0.15 40); --on-accent: oklch(17% 0.02 275); } .zone-historical { --accent: oklch(80% 0.09 85); --accent-2: oklch(72% 0.07 160); --accent-3: oklch(70% 0.08 320); --on-accent: oklch(18% 0.02 85); } .zone-rollingstock{ --accent: oklch(68% 0.16 255);--accent-2: oklch(80% 0.10 210); --accent-3: oklch(86% 0.15 100); --on-accent: oklch(15% 0.016 250); } .zone-market { --accent: oklch(72% 0.24 330); --accent-2: oklch(68% 0.21 285); --accent-3: oklch(74% 0.15 200); --on-accent: oklch(16% 0.02 300); } .zone-structures { --accent: oklch(74% 0.14 128); --accent-2: oklch(85% 0.085 92); --accent-3: oklch(72% 0.12 205); --on-accent: oklch(17% 0.02 128); } .zone-miles { --accent: oklch(80% 0.16 170); --accent-2: oklch(70% 0.20 300); --accent-3: oklch(82% 0.12 340); --on-accent: oklch(17% 0.02 170); } .zone-org { --accent: oklch(74% 0.14 240); --accent-2: oklch(82% 0.10 210); --accent-3: oklch(78% 0.12 180); --on-accent: oklch(16% 0.02 240); } .zone-departures { --accent: oklch(82% 0.15 78); --accent-2: oklch(72% 0.12 200); --accent-3: oklch(72% 0.18 320); --on-accent: oklch(18% 0.02 78); } .zone-journey { --accent: oklch(78% 0.14 210); --accent-2: oklch(70% 0.19 265); --accent-3: oklch(78% 0.15 335); --on-accent: oklch(17% 0.02 210); } .zone-diagrams { --accent: oklch(76% 0.13 230); --accent-2: oklch(82% 0.09 200); --accent-3: oklch(86% 0.14 100); --on-accent: oklch(16% 0.02 230); } .zone-compositions{ --accent: oklch(74% 0.16 280);--accent-2: oklch(80% 0.11 320); --accent-3: oklch(76% 0.13 230); --on-accent: oklch(16% 0.02 280); } .zone-cameras { --accent: oklch(70% 0.22 12); --accent-2: oklch(78% 0.13 200); --accent-3: oklch(84% 0.15 95); --on-accent: oklch(16% 0.02 12); } .zone-jobs { --accent: oklch(72% 0.17 218); --accent-2: oklch(62% 0.20 300); --accent-3: oklch(84% 0.14 95); --on-accent: oklch(15% 0.02 218); } .zone-freight { --accent: oklch(70% 0.17 41); --accent-2: oklch(60% 0.18 22); --accent-3: oklch(84% 0.13 88); --on-accent: oklch(16% 0.02 41); } .zone-developer { --accent: oklch(78% 0.17 150); --accent-2: oklch(80% 0.12 200); --accent-3: oklch(72% 0.18 300); --on-accent: oklch(16% 0.02 150); } /* .zone-account uses the BASE signal (no dedicated hue): it inherits --accent/-2/-3 from :root. */ [data-theme="light"] .zone-heritage { --accent: oklch(52% 0.13 90); --accent-2: oklch(46% 0.11 190); --accent-3: oklch(46% 0.16 300); --on-accent: oklch(99% 0.004 90); } [data-theme="light"] .zone-press { --accent: oklch(48% 0.20 27); --accent-2: oklch(44% 0.19 15); --accent-3: oklch(50% 0.17 42); --on-accent: oklch(99% 0.004 250); } [data-theme="light"] .zone-gauge { --accent: oklch(46% 0.13 158); --accent-2: oklch(44% 0.12 195); --accent-3: oklch(48% 0.13 120); --on-accent: oklch(99% 0.004 165); } [data-theme="light"] .zone-partners { --accent: oklch(51% 0.11 85); --accent-2: oklch(44% 0.15 260); --accent-3: oklch(42% 0.13 210); --on-accent: oklch(99% 0.004 90); } [data-theme="light"] .zone-performance{ --accent: oklch(48% 0.13 220); --accent-2: oklch(46% 0.14 245); --accent-3: oklch(50% 0.12 190); --on-accent: oklch(99% 0.004 235); } [data-theme="light"] .zone-station { --accent: oklch(48% 0.15 240); --accent-2: oklch(44% 0.16 270); --accent-3: oklch(50% 0.12 200); --on-accent: oklch(99% 0.004 250); } [data-theme="light"] .zone-community { --accent: oklch(52% 0.15 105); --accent-2: oklch(46% 0.19 300); --accent-3: oklch(50% 0.16 350); --on-accent: oklch(99% 0.004 105); } [data-theme="light"] .zone-spotting { --accent: oklch(48% 0.17 50); --accent-2: oklch(44% 0.17 30); --accent-3: oklch(50% 0.14 85); --on-accent: oklch(99% 0.006 50); } [data-theme="light"] .zone-blog { --accent: oklch(48% 0.16 300); --accent-2: oklch(46% 0.16 265); --accent-3: oklch(50% 0.15 345); --on-accent: oklch(99% 0.004 300); } [data-theme="light"] .zone-museum { --accent: oklch(46% 0.12 178); --accent-2: oklch(50% 0.09 155); --accent-3: oklch(50% 0.15 42); --on-accent: oklch(99% 0.004 275); } [data-theme="light"] .zone-historical { --accent: oklch(50% 0.08 85); --accent-2: oklch(46% 0.07 160); --accent-3: oklch(44% 0.08 320); --on-accent: oklch(99% 0.004 85); } [data-theme="light"] .zone-rollingstock{ --accent: oklch(48% 0.15 255);--accent-2: oklch(50% 0.11 210); --accent-3: oklch(50% 0.13 95); --on-accent: oklch(99% 0.004 255); } [data-theme="light"] .zone-market { --accent: oklch(48% 0.17 250); --accent-2: oklch(47% 0.22 297); --accent-3: oklch(50% 0.21 345); --on-accent: oklch(99% 0.004 280); } [data-theme="light"] .zone-structures { --accent: oklch(46% 0.13 128); --accent-2: oklch(50% 0.09 92); --accent-3: oklch(48% 0.12 205); --on-accent: oklch(99% 0.004 128); } [data-theme="light"] .zone-miles { --accent: oklch(47% 0.16 170); --accent-2: oklch(46% 0.16 300); --accent-3: oklch(50% 0.14 340); --on-accent: oklch(99% 0.004 170); } [data-theme="light"] .zone-org { --accent: oklch(46% 0.13 240); --accent-2: oklch(48% 0.10 210); --accent-3: oklch(48% 0.12 180); --on-accent: oklch(99% 0.004 240); } [data-theme="light"] .zone-departures { --accent: oklch(50% 0.13 78); --accent-2: oklch(46% 0.11 200); --accent-3: oklch(50% 0.15 320); --on-accent: oklch(99% 0.004 78); } [data-theme="light"] .zone-journey { --accent: oklch(48% 0.14 210); --accent-2: oklch(46% 0.16 265); --accent-3: oklch(50% 0.15 335); --on-accent: oklch(99% 0.004 210); } [data-theme="light"] .zone-diagrams { --accent: oklch(48% 0.13 230); --accent-2: oklch(48% 0.10 200); --accent-3: oklch(50% 0.13 100); --on-accent: oklch(99% 0.004 230); } [data-theme="light"] .zone-compositions{ --accent: oklch(47% 0.16 280);--accent-2: oklch(50% 0.13 320); --accent-3: oklch(48% 0.12 230); --on-accent: oklch(99% 0.004 280); } [data-theme="light"] .zone-cameras { --accent: oklch(50% 0.20 12); --accent-2: oklch(48% 0.11 200); --accent-3: oklch(50% 0.13 95); --on-accent: oklch(99% 0.004 12); } [data-theme="light"] .zone-jobs { --accent: oklch(46% 0.17 218); --accent-2: oklch(44% 0.19 300); --accent-3: oklch(50% 0.12 95); --on-accent: oklch(99% 0.004 218); } [data-theme="light"] .zone-freight { --accent: oklch(48% 0.15 41); --accent-2: oklch(46% 0.16 22); --accent-3: oklch(52% 0.12 82); --on-accent: oklch(99% 0.004 41); } [data-theme="light"] .zone-developer { --accent: oklch(46% 0.15 150); --accent-2: oklch(48% 0.11 200); --accent-3: oklch(48% 0.16 300); --on-accent: oklch(99% 0.004 150); } /* ── reset & base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.55; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } [hidden] { display: none !important; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; } p { text-wrap: pretty; margin: 0; } h1, h2, h3, h4 { text-wrap: balance; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } ::selection { background: var(--accent-soft); } /* ── type scale ─────────────────────────────────────────────────────────── */ .h1, h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 0.94; letter-spacing: -0.04em; margin: 0; font-weight: 700; } .h2, h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.035em; margin: 0; font-weight: 700; } .h3, h3 { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; letter-spacing: -0.018em; margin: 0; } .h4, h4 { font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; margin: 0; } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 58ch; margin: 0; } .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0; } .eyebrow--accent { color: var(--accent); } .meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; } .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── layout primitives ──────────────────────────────────────────────────── */ .container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } @media (max-width: 560px) { :root { --gutter: 20px; } } @media (max-width: 390px) { :root { --gutter: 16px; } } .section { padding-block: clamp(60px, 8vw, var(--gap-2xl)); } .section + .section { border-top: 1px solid var(--border); } .stack { display: flex; flex-direction: column; } .stack > * + * { margin-top: var(--gap-md); } .row { display: flex; align-items: center; gap: var(--gap-md); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); } @media (max-width: 920px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* ── core components (shared grammar — see assets/rail.css for the full set) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; min-height: 46px; border-radius: var(--radius-pill); border: 1px solid transparent; font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; transition: background .14s ease, border-color .14s ease, color .14s ease, transform .08s ease, box-shadow .16s ease, filter .16s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--grad); color: var(--on-accent); border-color: transparent; box-shadow: var(--shadow-btn); } .btn-primary:hover { filter: saturate(1.12) brightness(1.06); transform: translateY(-1px); box-shadow: var(--glow); } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--fg); background: var(--fg-soft); } .btn-ghost { background: transparent; color: var(--fg); border-color: transparent; padding-inline: 12px; min-height: 40px; } .btn-ghost:hover { color: var(--accent); } .btn-sm { padding: 7px 16px; min-height: 38px; font-size: 14px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; } .panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .rule { border: 0; border-top: 1px solid var(--border); margin: 0; } .status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid transparent; } .status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .status--ok { color: var(--ok); background: var(--ok-soft); border-color: color-mix(in oklch, var(--ok) 28%, transparent); } .status--warn { color: var(--warn); background: var(--warn-soft); border-color: color-mix(in oklch, var(--warn) 32%, transparent); } .status--danger { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 30%, transparent); } .status--info { color: var(--info); background: var(--info-soft); border-color: color-mix(in oklch, var(--info) 28%, transparent); } .status--accent { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 28%, transparent); } .status--live::before { animation: pulse 1.6s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 11px; font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .input, .select, .textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--fg); font: inherit; font-size: 15px; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; } .input::placeholder, .textarea::placeholder { color: var(--muted); } .input:hover, .select:hover { border-color: var(--fg); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); background: var(--bg); box-shadow: 0 0 0 3px var(--accent-soft); } .textarea { min-height: 96px; resize: vertical; line-height: 1.55; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }