/* ============================================================ K2 KCDS Theme — KnowledgeCity Design System v3.0 ============================================================ K2's default theme. KCDS is the universal `:root` baseline; other themes layer sparse overrides on top. Three independent namespaces, three intended consumers: --kcds-* KCDS-native tokens (Tier 1 primitives + Tier 2 semantic + scales + KCDS component metrics). The designer's source-of-truth vocabulary. Declared once at :root. Every override axis (dark / category / density) redeclares ONLY at this layer — the K2 bridge below follows automatically via the var() chain. --k2-* K2's component-API contract. Declared at :root AND at [data-theme="kcds"] so the nested-theme pattern works (a `
` inside an `` reinstates the KCDS bridge for that subtree). Every K2 token is `var(--kcds-*)`, so KCDS value bumps propagate without component edits. The split is load-bearing. If --kcds-* tokens were ALSO redeclared inside [data-theme="kcds"], they'd shadow ancestor axis overrides on the nested subtree (e.g. `` → `
` would render light because the local [data-theme="kcds"] block re-set --kcds-color-* to light values). Keeping --kcds-* at :root ONLY means axis overrides cascade through inheritance into nested subtrees as intended. Composable attributes — apply standalone or combine on any element: data-kcds-theme="dark" data-kcds-product-category="grow|learn|perform|comply|platform" data-kcds-density="compact" (or class .density--compact) K2's `data-structure` axis (sharp/soft/round/spacious/extra- spacious) remains the K2-superset density axis. KCDS comfortable and KCDS compact sit inside that ladder. Designer's "Indirection rule": Tier 2 semantic tokens redeclare their primitive *directly*, not chained from another semantic. Each axis override block obeys the rule for the Tier 2 it redeclares. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;600;700&family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=JetBrains+Mono:wght@400;600&display=swap'); /* ============================================================ :root — KCDS PRIMITIVES, SEMANTIC, SCALES, COMPONENT METRICS Declared only here. Axis overrides redeclare via inheritance. ============================================================ */ :root { /* ── Tier 1 primitives (verbatim from designer doc) ── */ /* Brand orange */ --kcds-orange-50: #FFEDDC; --kcds-orange-100: #FFE1C4; --kcds-orange-200: #FFDBBA; --kcds-orange-300: #FBD1AB; --kcds-orange-400: #FF7A00; --kcds-orange-500: #FF881A; --kcds-orange-600: #FF6F00; --kcds-orange-700: #C75F00; /* Neutrals */ --kcds-gray-0: #FFFFFF; --kcds-gray-50: #F8F8F7; --kcds-gray-100: #F3F7F9; --kcds-gray-200: #EAEFF3; --kcds-gray-300: #EAEAEA; --kcds-gray-400: #CCD5DD; --kcds-gray-500: #9A9A9A; --kcds-gray-600: #74838A; --kcds-gray-700: #404A4F; --kcds-gray-800: #3F454A; --kcds-gray-900: #2C3E46; --kcds-gray-950: #1F2023; /* Status palettes */ --kcds-green-50: #ECFFEF; --kcds-green-500: #35C04C; --kcds-green-700: #00A01A; --kcds-red-50: #FFF0F0; --kcds-red-500: #F03E3E; --kcds-red-600: #D43333; --kcds-blue-50: #E4F5FF; --kcds-blue-500: #329DFF; --kcds-violet-50: #EDDFFF; --kcds-violet-500:#8543DA; --kcds-yellow-500:#FDCA16; --kcds-bronze-500:#EA9F59; /* Category primaries */ --kcds-teal-50: #E0F7F7; --kcds-teal-100: #B5EBEB; --kcds-teal-500: #0EA5A5; --kcds-teal-700: #0B7C7C; --kcds-indigo-50: #EEF2FF; --kcds-indigo-100: #E0E7FF; --kcds-indigo-500: #4F46E5; --kcds-indigo-700: #3730A3; --kcds-slate-50: #F1F5F9; --kcds-slate-100: #E2E8F0; --kcds-slate-500: #475569; --kcds-slate-700: #334155; --kcds-cyan-50: #ECFEFF; --kcds-cyan-100: #CFFAFE; --kcds-cyan-500: #0891B2; --kcds-cyan-700: #155E75; /* Dark canvas primitives */ --kcds-darkgray-canvas: #0F1419; --kcds-darkgray-surface: #181D22; --kcds-darkgray-elevated: #21272D; --kcds-darkgray-subtle: #1C2228; --kcds-darkgray-border: #2A3038; --kcds-darkgray-border-default: #3A424B; --kcds-darkgray-border-strong: #525C66; /* ── Tier 2 semantic (light, legacy orange — Indirection rule) ── */ --kcds-color-primary: #FF881A; --kcds-color-primary-hover: #FF6F00; --kcds-color-primary-active: #C75F00; --kcds-color-primary-fill: #FFE1C4; --kcds-color-primary-tint: #FFEDDC; --kcds-color-on-primary: #FFFFFF; --kcds-color-on-primary-tint: #C75F00; /* Legacy-orange dark exception: on-primary flips to near-black (#1F2226) for AA contrast (6.68:1) on orange fills in dark mode. Per-category blocks for KC Native categories keep white because their primaries are deeper-saturated and meet AA with white. */ --kcds-color-text-primary: #1F2023; /* learner / public surfaces */ --kcds-color-text-primary-admin: #2C3E46; /* admin / workspace surfaces (slightly cooler) */ /* WCAG 2.1 AA fix (2026-06-04): legacy values #9A9A9A / #74838A failed 1.4.3 (~2.8:1 / ~3.6:1 on white). Darkened to clear 4.5:1 on white (#737373 ≈ 4.5:1, #5E6970 ≈ 5.1:1). Sync with kc-design-foundations when designer-approved — this snapshot leads the source until then. */ --kcds-color-text-secondary: #737373; --kcds-color-text-tertiary: #5E6970; --kcds-color-text-disabled: #CCD5DD; --kcds-color-text-link: #FF881A; --kcds-color-text-on-dark: #FFFFFF; /* text on dark hero / footer */ --kcds-color-surface-default: #FFFFFF; --kcds-color-surface-canvas: #F3F7F9; /* admin page bg */ --kcds-color-surface-canvas-warm: #FFEDDC; /* learner Portal page bg */ --kcds-color-surface-subtle: #EAEFF3; /* hover / row-hover / table-header (one step darker than canvas) */ --kcds-color-surface-elevated: #FFFFFF; --kcds-color-surface-disabled: #EAEAEA; /* disabled control surface */ --kcds-color-surface-dark: #1F2023; --kcds-color-surface-tile-day: #FFFFFF; /* calendar day card */ /* Track background — for progress bars, sliders, meters, sentiment * bars sitting inside white panels. Needs contrast against the panel * it sits on, not subtle plane tones. Dark-mode value is tuned for * 1.67:1 against `--kcds-darkgray-surface` (designer's own ratio). */ --kcds-color-track-bg: var(--kcds-gray-200); --kcds-color-border-default: #CCD5DD; --kcds-color-border-subtle: #EAEFF3; --kcds-color-border-strong: #74838A; --kcds-color-border-focus: #FF881A; --kcds-color-status-success: #00A01A; --kcds-color-status-error: #F03E3E; --kcds-color-status-warning: #FF881A; --kcds-color-status-info: #329DFF; --kcds-color-status-featured: #8543DA; --kcds-color-ai-suggestion: #8543DA; --kcds-color-ai-suggestion-bg:#EDDFFF; --kcds-color-ai-flagged: #FDCA16; /* AI flagged for human review */ --kcds-color-ai-flagged-bg: #FFF8E6; /* Status -fill values (saturated mid-tone for inline icons inside tinted bg). */ --kcds-color-status-success-fill: #35C04C; --kcds-color-status-error-fill: #F03E3E; --kcds-color-status-warning-fill: #FDCA16; --kcds-color-status-info-fill: #329DFF; --kcds-color-status-featured-fill: #8543DA; --kcds-color-status-neutral: #74838A; --kcds-color-status-neutral-bg: #F3F7F9; /* Severity tiers (1=info → 5=critical) — risk / incident classification. */ --kcds-color-severity-1: #329DFF; --kcds-color-severity-2: #35C04C; --kcds-color-severity-3: #FDCA16; --kcds-color-severity-4: #FF881A; --kcds-color-severity-5: #F03E3E; /* Sensitivity tiers (4 levels per designer spec). */ --kcds-color-sensitivity-public: #9A9A9A; --kcds-color-sensitivity-internal: #329DFF; --kcds-color-sensitivity-confidential: #FF881A; --kcds-color-sensitivity-highly-sensitive: #F03E3E; /* Decorative tile pairs — KPI tiles, sidebar nav icons, category cards. */ --kcds-color-tile-info-bg: #E4F5FF; --kcds-color-tile-info-fg: #329DFF; --kcds-color-tile-featured-bg: #EDDFFF; --kcds-color-tile-featured-fg: #8543DA; --kcds-color-tile-success-bg: #ECFFEF; --kcds-color-tile-success-fg: #00A01A; --kcds-color-tile-warning-bg: #FFEDDC; --kcds-color-tile-warning-fg: #FF881A; --kcds-color-tile-error-bg: #FFF0F0; --kcds-color-tile-error-fg: #F03E3E; --kcds-color-tile-neutral-bg: #F3F7F9; --kcds-color-tile-neutral-fg: #404A4F; /* Achievement badges (gold / silver / bronze / locked). */ --kcds-color-achievement-gold-bg: #FFF4D6; --kcds-color-achievement-gold-fg: #FDCA16; --kcds-color-achievement-silver-bg: #F3F7F9; --kcds-color-achievement-silver-fg: #74838A; --kcds-color-achievement-bronze-bg: #FFE6D1; --kcds-color-achievement-bronze-fg: #EA9F59; --kcds-color-achievement-locked-bg: #EAEFF3; --kcds-color-achievement-locked-fg: #9A9A9A; /* Status soft-background tints — for "approaching deadline" cards, * inline success/error messages, info banners. Pair with the matching * --kcds-color-status-* foreground. Dark theme overrides below. */ --kcds-color-status-success-bg: #ECFFEF; --kcds-color-status-error-bg: #FFF0F0; --kcds-color-status-warning-bg: #FFEDDC; --kcds-color-status-info-bg: #E4F5FF; /* Density-coupled tokens — resolve from data-kcds-density attribute. * Component authors who read these get density-awareness for free * without remembering to declare per-component compact overrides. * Default values are comfortable; [data-kcds-density="compact"] block * below redeclares for compact. Spec: 02-cross-cutting/density.md § * "Density tokens (9)". */ --kcds-density-radius-control: 16px; /* buttons, inputs */ --kcds-density-radius-card: 16px; --kcds-density-radius-container: 32px; --kcds-density-gap: 16px; /* form rows, list gaps */ --kcds-density-section-gap: 32px; /* between page sections */ --kcds-density-page-padding: 24px; /* content padding from page edge */ --kcds-density-text-base: 16px; --kcds-density-input-height: 52px; /* canonical comfortable input height */ --kcds-density-button-height: 56px; /* canonical comfortable medium button */ /* Extended primary scale (K2 components consume a 50-700 ramp). */ --kcds-color-primary-50: #FFEDDC; --kcds-color-primary-100: #FFE1C4; --kcds-color-primary-200: #FFDBBA; --kcds-color-primary-300: #FBD1AB; --kcds-color-primary-400: #FF7A00; --kcds-color-primary-500: #FF881A; --kcds-color-primary-600: #FF6F00; --kcds-color-primary-700: #C75F00; /* ── KCDS scales ── */ /* Typography */ --kcds-font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; --kcds-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; --kcds-text-display: 80px; --kcds-text-h1: 32px; --kcds-text-h2: 24px; --kcds-text-h3: 20px; --kcds-text-h4: 18px; --kcds-text-h5: 16px; --kcds-text-body-l: 18px; --kcds-text-body-m: 16px; --kcds-text-body-s: 14px; --kcds-text-caption: 12px; --kcds-text-label: 11px; --kcds-text-link: 16px; /* same px as body-m; consumers use weight 600 */ --kcds-line-height-tight: 1.2; --kcds-line-height-normal: 1.5; --kcds-line-height-relaxed: 1.625; --kcds-font-weight-regular: 400; --kcds-font-weight-semibold: 600; --kcds-font-weight-bold: 700; /* Spacing — pixel-named per designer doc */ --kcds-spacing-0: 0; --kcds-spacing-2: 2px; /* hairline — rare */ --kcds-spacing-4: 4px; --kcds-spacing-8: 8px; --kcds-spacing-12: 12px; --kcds-spacing-16: 16px; --kcds-spacing-20: 20px; --kcds-spacing-24: 24px; --kcds-spacing-32: 32px; --kcds-spacing-40: 40px; --kcds-spacing-48: 48px; --kcds-spacing-64: 64px; --kcds-spacing-80: 80px; /* marketing pages only */ --kcds-spacing-128: 128px; /* marketing-page hero */ /* Container max-widths (per designer's containers). */ --kcds-container-max-portal: 1632px; --kcds-container-max-content: 720px; --kcds-container-max-form: 480px; /* Radius */ --kcds-radius-0: 0; --kcds-radius-2: 2px; /* hairline — subtle softening */ --kcds-radius-4: 4px; --kcds-radius-8: 8px; --kcds-radius-12: 12px; --kcds-radius-16: 16px; --kcds-radius-20: 20px; --kcds-radius-24: 24px; --kcds-radius-32: 32px; --kcds-radius-full: 9999px; /* Shadow */ /* Six-tier elevation scale per designer spec. * Each is a two-shadow stack — immediate contact + softer ambient. * Cool-dark base (#1F2023) matches KCDS text colour; low opacity keeps * shadows subtle. Legacy sm/md/lg names kept as aliases below. */ --kcds-shadow-0: none; --kcds-shadow-1: 0 1px 2px 0 rgba(31,32,35,0.05), 0 1px 3px 0 rgba(31,32,35,0.04); --kcds-shadow-2: 0 2px 4px -1px rgba(31,32,35,0.06), 0 4px 6px -1px rgba(31,32,35,0.06); --kcds-shadow-3: 0 4px 8px -2px rgba(31,32,35,0.08), 0 8px 16px -4px rgba(31,32,35,0.08); --kcds-shadow-4: 0 8px 16px -4px rgba(31,32,35,0.10), 0 16px 32px -8px rgba(31,32,35,0.10); --kcds-shadow-5: 0 12px 24px -6px rgba(31,32,35,0.12), 0 24px 48px -12px rgba(31,32,35,0.12); /* Aliases for legacy sm/md/lg consumers (pre-Phase 6). */ --kcds-shadow-sm: var(--kcds-shadow-1); --kcds-shadow-md: var(--kcds-shadow-2); --kcds-shadow-lg: var(--kcds-shadow-3); /* Scrim tokens — backdrop opacity per overlay type. */ --kcds-scrim-modal: rgba(31,32,35,0.50); --kcds-scrim-drawer: rgba(31,32,35,0.30); --kcds-scrim-tour: rgba(31,32,35,0.70); /* Z-index — 10 named tiers (extends earlier 8). */ --kcds-z-base: 0; --kcds-z-raised: 10; --kcds-z-dropdown: 100; --kcds-z-popover: 200; --kcds-z-fixed-nav: 500; --kcds-z-overlay: 1000; --kcds-z-modal-back: 2000; --kcds-z-modal: 2001; --kcds-z-toast: 9000; --kcds-z-tour: 9500; /* Transition */ --kcds-transition-fast: 120ms ease; --kcds-transition-normal: 200ms ease; --kcds-transition-slow: 320ms ease; } /* ── KCDS component metrics — comfortable density (default) ── * Split into its own selector list so .density--comfortable can FORCE * comfortable in a scoped subtree even when an ancestor has * data-kcds-density="compact". Side-by-side previews use this pattern. * Density compact (selector below) redeclares only this same set; the * K2 bridge follows via var() chains. */ :root, .density--comfortable { --kcds-button-height-sm: 48px; --kcds-button-height-md: 56px; --kcds-button-height-lg: 64px; --kcds-button-padding-x-sm: 16px; --kcds-button-padding-x-md: 24px; --kcds-button-padding-x-lg: 32px; --kcds-button-font-size-sm: 14px; --kcds-button-font-size-md: 16px; --kcds-button-font-size-lg: 16px; --kcds-button-font-weight: 400; --kcds-button-radius-sm: 16px; --kcds-button-radius-md: 20px; --kcds-button-radius-lg: 24px; --kcds-input-height-sm: 48px; --kcds-input-height-md: 52px; --kcds-input-height-lg: 64px; --kcds-input-radius-sm: 16px; --kcds-input-radius-md: 20px; --kcds-input-radius-lg: 20px; --kcds-input-padding-x: 20px; --kcds-input-font-size: 16px; --kcds-card-radius: 16px; /* comfortable density-radius-card per radius.md */ --kcds-card-padding: 24px; --kcds-dialog-radius: 16px; /* matches comfortable card radius */ --kcds-dropdown-radius:12px; --kcds-toast-radius: 12px; --kcds-tooltip-radius: 8px; --kcds-tooltip-padding: 6px 10px; --kcds-alert-radius: 12px; --kcds-alert-padding: 16px; --kcds-badge-radius: 9999px; --kcds-badge-padding: 4px 12px; --kcds-badge-font-size:12px; --kcds-badge-font-weight: 600; --kcds-table-cell-padding: 12px 16px; --kcds-table-font-size: 14px; --kcds-table-header-font-size: 12px; --kcds-table-header-font-weight: 600; --kcds-avatar-size-sm: 28px; --kcds-avatar-size-md: 40px; --kcds-avatar-size-lg: 56px; --kcds-avatar-size-xl: 80px; --kcds-progress-height: 8px; --kcds-progress-radius: 9999px; --kcds-icon-size-sm: 14px; --kcds-icon-size-md: 18px; --kcds-icon-size-lg: 20px; } /* ============================================================ K2 BRIDGE — chains all --k2-* through --kcds-* Declared at :root AND [data-theme="kcds"] so a nested
inside a non-KCDS parent reinstates the KCDS bridge for that subtree. NO --kcds-* declarations here — those stay at :root only so axis cascades through. ============================================================ */ :root, [data-theme="kcds"] { /* ────────────────────────────────────────────────────────── K2 LAYER 2 — CANONICAL SEMANTIC API (v1.1.0-aligned) ────────────────────────────────────────────────────────── This is the API K2 components MUST consume. Verbose semantic names mirror KCDS v1.1.0 vocabulary 1:1, so any compliant design system can plug in by populating these tokens. The legacy short-name aliases below this block remain in place for backward compatibility during the v1.1.0 migration and will be removed once all components are ported. ────────────────────────────────────────────────────────── */ /* Brand — semantic states (no numeric stops) */ --k2-color-primary: var(--kcds-color-primary); --k2-color-primary-hover: var(--kcds-color-primary-hover); --k2-color-primary-active: var(--kcds-color-primary-active); --k2-color-primary-tint: var(--kcds-color-primary-tint); --k2-color-primary-fill: var(--kcds-color-primary-fill); --k2-color-on-primary: var(--kcds-color-on-primary); --k2-color-on-primary-tint: var(--kcds-color-on-primary-tint); /* Text */ --k2-color-text-primary: var(--kcds-color-text-primary); --k2-color-text-primary-admin: var(--kcds-color-text-primary-admin); --k2-color-text-secondary: var(--kcds-color-text-secondary); --k2-color-text-tertiary: var(--kcds-color-text-tertiary); --k2-color-text-disabled: var(--kcds-color-text-disabled); --k2-color-text-on-dark: var(--kcds-color-text-on-dark); --k2-color-text-link: var(--kcds-color-text-link); /* Surface */ --k2-color-surface-default: var(--kcds-color-surface-default); --k2-color-surface-canvas: var(--kcds-color-surface-canvas); --k2-color-surface-canvas-warm: var(--kcds-color-surface-canvas-warm); --k2-color-surface-subtle: var(--kcds-color-surface-subtle); --k2-color-surface-elevated: var(--kcds-color-surface-elevated); --k2-color-surface-disabled: var(--kcds-color-surface-disabled); --k2-color-surface-dark: var(--kcds-color-surface-dark); --k2-color-surface-tile-day: var(--kcds-color-surface-tile-day); /* Border */ --k2-color-border-default: var(--kcds-color-border-default); --k2-color-border-subtle: var(--kcds-color-border-subtle); --k2-color-border-strong: var(--kcds-color-border-strong); --k2-color-border-focus: var(--kcds-color-border-focus); /* Status — success / warning / error / info / featured */ --k2-color-status-success: var(--kcds-color-status-success); --k2-color-status-success-bg: var(--kcds-color-status-success-bg); --k2-color-status-success-fill: var(--kcds-color-status-success-fill); --k2-color-status-warning: var(--kcds-color-status-warning); --k2-color-status-warning-bg: var(--kcds-color-status-warning-bg); --k2-color-status-warning-fill: var(--kcds-color-status-warning-fill); --k2-color-status-error: var(--kcds-color-status-error); --k2-color-status-error-bg: var(--kcds-color-status-error-bg); --k2-color-status-error-fill: var(--kcds-color-status-error-fill); --k2-color-status-info: var(--kcds-color-status-info); --k2-color-status-info-bg: var(--kcds-color-status-info-bg); --k2-color-status-featured: var(--kcds-color-status-featured); --k2-color-status-featured-bg: var(--kcds-color-status-featured-bg); /* AI augmentation */ --k2-color-ai-suggestion: var(--kcds-color-ai-suggestion); --k2-color-ai-suggestion-bg: var(--kcds-color-ai-suggestion-bg); --k2-color-ai-flagged: var(--kcds-color-ai-flagged); --k2-color-ai-flagged-bg: var(--kcds-color-ai-flagged-bg); /* Severity 1-5 (compliance / safety / PIP) */ --k2-color-severity-1: var(--kcds-color-severity-1); --k2-color-severity-2: var(--kcds-color-severity-2); --k2-color-severity-3: var(--kcds-color-severity-3); --k2-color-severity-4: var(--kcds-color-severity-4); --k2-color-severity-5: var(--kcds-color-severity-5); /* Sensitivity tiers (PII classification) */ --k2-color-sensitivity-public: var(--kcds-color-sensitivity-public); --k2-color-sensitivity-internal: var(--kcds-color-sensitivity-internal); --k2-color-sensitivity-confidential: var(--kcds-color-sensitivity-confidential); --k2-color-sensitivity-highly-sensitive: var(--kcds-color-sensitivity-highly-sensitive); /* Decorative tiles — bg / fg pairs */ --k2-color-tile-info-bg: var(--kcds-color-tile-info-bg); --k2-color-tile-info-fg: var(--kcds-color-tile-info-fg); --k2-color-tile-featured-bg: var(--kcds-color-tile-featured-bg); --k2-color-tile-featured-fg: var(--kcds-color-tile-featured-fg); --k2-color-tile-success-bg: var(--kcds-color-tile-success-bg); --k2-color-tile-success-fg: var(--kcds-color-tile-success-fg); --k2-color-tile-warning-bg: var(--kcds-color-tile-warning-bg); --k2-color-tile-warning-fg: var(--kcds-color-tile-warning-fg); --k2-color-tile-neutral-bg: var(--kcds-color-tile-neutral-bg); --k2-color-tile-neutral-fg: var(--kcds-color-tile-neutral-fg); /* Achievement badges */ --k2-color-achievement-gold-bg: var(--kcds-color-achievement-gold-bg); --k2-color-achievement-gold-fg: var(--kcds-color-achievement-gold-fg); --k2-color-achievement-silver-bg: var(--kcds-color-achievement-silver-bg); --k2-color-achievement-silver-fg: var(--kcds-color-achievement-silver-fg); --k2-color-achievement-bronze-bg: var(--kcds-color-achievement-bronze-bg); --k2-color-achievement-bronze-fg: var(--kcds-color-achievement-bronze-fg); --k2-color-achievement-locked-bg: var(--kcds-color-achievement-locked-bg); --k2-color-achievement-locked-fg: var(--kcds-color-achievement-locked-fg); /* Additional surface / utility */ --k2-color-track-bg: var(--kcds-color-track-bg); --k2-color-tile-error-bg: var(--kcds-color-tile-error-bg, var(--kcds-color-status-error-bg)); --k2-color-tile-error-fg: var(--kcds-color-tile-error-fg, var(--kcds-color-status-error)); --k2-scrim-modal: var(--kcds-scrim-modal, rgba(31, 32, 35, 0.40)); /* Spacing scale (4px grid, semantic on top of legacy t-shirts below) */ --k2-space-0: var(--kcds-spacing-0); --k2-space-2: var(--kcds-spacing-2); --k2-space-4: var(--kcds-spacing-4); --k2-space-8: var(--kcds-spacing-8); --k2-space-12: var(--kcds-spacing-12); --k2-space-16: var(--kcds-spacing-16); --k2-space-20: var(--kcds-spacing-20); --k2-space-24: var(--kcds-spacing-24); --k2-space-32: var(--kcds-spacing-32); --k2-space-40: var(--kcds-spacing-40); --k2-space-48: var(--kcds-spacing-48); --k2-space-64: var(--kcds-spacing-64); /* Radius scale */ --k2-radius-0: var(--kcds-radius-0); --k2-radius-2: var(--kcds-radius-2); --k2-radius-4: var(--kcds-radius-4); --k2-radius-8: var(--kcds-radius-8); --k2-radius-12: var(--kcds-radius-12); --k2-radius-16: var(--kcds-radius-16); --k2-radius-24: var(--kcds-radius-24); --k2-radius-32: var(--kcds-radius-32); /* Typography — canonical semantic */ --k2-text-h1: var(--kcds-text-h1); --k2-text-h2: var(--kcds-text-h2); --k2-text-h3: var(--kcds-text-h3); --k2-text-h4: var(--kcds-text-h4); --k2-text-h5: var(--kcds-text-h5); --k2-text-body-l: var(--kcds-text-body-l); --k2-text-body-m: var(--kcds-text-body-m); --k2-text-body-s: var(--kcds-text-body-s); --k2-text-caption: var(--kcds-text-caption); --k2-text-label: var(--kcds-text-label); /* Typography slot aliases used by some component CSS — same values as the canonical h1/h2/h4/h5 above, exposed under the alternate names KCDS publishes (heading-2, heading-m, heading-s, display-s). A bridge populates them; components can use either name. */ --k2-text-display-s: var(--kcds-text-display-s, var(--kcds-text-display, 80px)); --k2-text-heading-2: var(--kcds-text-heading-2, var(--kcds-text-h2)); --k2-text-heading-m: var(--kcds-text-heading-m, var(--kcds-text-h4)); --k2-text-heading-s: var(--kcds-text-heading-s, var(--kcds-text-h5)); --k2-text-weight-bold: var(--kcds-text-weight-bold, var(--kcds-font-weight-bold, 700)); /* Motion / easing slot */ --k2-ease-out: var(--kcds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); /* ────────────────────────────────────────────────────────── K2 LAYER 2 — ALTERNATE NAME FORMS (semantic synonyms) ────────────────────────────────────────────────────────── Same values as the canonical semantic vocabulary above, exposed under shorter / numeric-stop / t-shirt names that some authors prefer: --k2-text ≡ --k2-color-text-primary --k2-bg ≡ --k2-color-surface-canvas --k2-border ≡ --k2-color-border-default --k2-space-md ≡ --k2-space-12 --k2-radius-md ≡ --k2-radius-12 --k2-color-primary-500≡ --k2-color-primary --k2-color-success-50 ≡ --k2-color-status-success-bg … Both forms are valid K2 API. Pick whichever reads better in context — they resolve to identical values and follow the same dark / category cascades. This block is SEPARATE from the per-component slot tokens below (--k2-button-*, --k2-input-*, --k2-card-*, etc.). Those slots enable per-component / per-instance customization and are an intentional, permanent part of K2's API. ────────────────────────────────────────────────────────── */ /* Typography */ --k2-font-family: var(--kcds-font-family); --k2-font-mono: var(--kcds-font-mono); --k2-font-size-xs: var(--kcds-text-label); /* 11px */ --k2-font-size-sm: var(--kcds-text-caption); /* 12px */ --k2-font-size-base: var(--kcds-text-body-s); /* 14px */ --k2-font-size-md: var(--kcds-text-body-s); /* 14px */ --k2-font-size-lg: var(--kcds-text-body-m); /* 16px */ --k2-font-size-xl: var(--kcds-text-body-l); /* 18px */ --k2-font-size-2xl: var(--kcds-text-h2); --k2-font-size-3xl: var(--kcds-text-h1); --k2-font-weight-normal: var(--kcds-font-weight-regular); --k2-font-weight-medium: var(--kcds-font-weight-regular); --k2-font-weight-semibold: var(--kcds-font-weight-semibold); --k2-font-weight-bold: var(--kcds-font-weight-bold); --k2-line-height-tight: var(--kcds-line-height-tight); --k2-line-height-normal: var(--kcds-line-height-normal); --k2-line-height-relaxed: var(--kcds-line-height-relaxed); --k2-letter-spacing-tight: -0.011em; --k2-letter-spacing-normal: 0; --k2-letter-spacing-wide: 0.04em; /* Primary color scale */ --k2-color-primary-50: var(--kcds-color-primary-50); --k2-color-primary-100: var(--kcds-color-primary-100); --k2-color-primary-200: var(--kcds-color-primary-200); --k2-color-primary-300: var(--kcds-color-primary-300); --k2-color-primary-400: var(--kcds-color-primary-400); --k2-color-primary-500: var(--kcds-color-primary-500); --k2-color-primary-600: var(--kcds-color-primary-600); --k2-color-primary-700: var(--kcds-color-primary-700); /* Status families */ --k2-color-success-50: var(--kcds-green-50); --k2-color-success-100: var(--kcds-green-50); --k2-color-success-200: #C9F2D2; --k2-color-success-500: var(--kcds-green-500); --k2-color-success-600: var(--kcds-color-status-success); --k2-color-success-700: #007A14; --k2-color-warning-50: #FFF8E6; --k2-color-warning-100: #FFF3D6; --k2-color-warning-200: #FFE4A8; --k2-color-warning-500: var(--kcds-color-status-warning); --k2-color-warning-600: var(--kcds-color-primary-hover); --k2-color-warning-700: var(--kcds-color-primary-active); --k2-color-danger-50: var(--kcds-red-50); --k2-color-danger-100: #FFE0E0; --k2-color-danger-200: #FFB8B8; --k2-color-danger-500: var(--kcds-color-status-error); --k2-color-danger-600: var(--kcds-red-600); --k2-color-danger-700: #A82323; --k2-color-info-50: var(--kcds-blue-50); --k2-color-info-100: #CEEAFF; --k2-color-info-500: var(--kcds-color-status-info); --k2-color-info-600: #1E6FBF; --k2-color-info-700: #1E5798; --k2-color-neutral-50: var(--kcds-gray-50); --k2-color-neutral-100: var(--kcds-gray-100); --k2-color-neutral-200: var(--kcds-gray-200); --k2-color-neutral-300: var(--kcds-gray-300); --k2-color-neutral-400: var(--kcds-gray-400); --k2-color-neutral-500: var(--kcds-gray-500); --k2-color-neutral-600: var(--kcds-gray-600); --k2-color-neutral-700: var(--kcds-gray-700); --k2-color-neutral-800: var(--kcds-gray-900); --k2-color-neutral-900: var(--kcds-gray-950); --k2-color-ai-50: var(--kcds-violet-50); --k2-color-ai-500: var(--kcds-color-ai-suggestion); --k2-color-ai-600: #6A2EB6; --k2-color-ai-700: #4F2782; /* Surface / text / borders */ --k2-bg: var(--kcds-color-surface-canvas); --k2-bg-secondary: var(--kcds-color-surface-subtle); --k2-bg-tertiary: var(--kcds-gray-200); --k2-surface: var(--kcds-color-surface-default); --k2-surface-raised: var(--kcds-color-surface-elevated); --k2-surface-overlay: rgba(255,255,255,0.85); --k2-surface-glass: rgba(255,255,255,0.72); --k2-overlay: rgba(31,32,35,0.40); --k2-text: var(--kcds-color-text-primary); --k2-text-secondary: var(--kcds-color-text-secondary); --k2-text-tertiary: var(--kcds-color-text-tertiary); --k2-text-quaternary: var(--kcds-color-text-disabled); --k2-text-on-primary: var(--kcds-color-on-primary); --k2-text-link: var(--kcds-color-text-link); --k2-border: var(--kcds-color-border-default); --k2-border-hover: var(--kcds-color-border-strong); --k2-border-focus: var(--kcds-color-border-focus); --k2-border-subtle: var(--kcds-color-border-subtle); /* Focus ring — 3px tinted box-shadow */ /* Canonical KCDS focus: 2px solid ring at the category accent color (3:1 contrast against any KC surface — passes WCAG 1.4.11). The earlier 35%-opacity tint was visually quieter but fell below 3:1 on white surfaces and failed the contrast rule. */ --k2-focus-ring: 0 0 0 2px var(--kcds-color-surface-default, #FFFFFF), 0 0 0 4px var(--kcds-color-border-focus); /* Radius t-shirts */ --k2-radius-sm: var(--kcds-radius-8); --k2-radius-md: var(--kcds-radius-12); --k2-radius-lg: var(--kcds-radius-16); --k2-radius-xl: var(--kcds-radius-20); --k2-radius-2xl: var(--kcds-radius-24); --k2-radius-full: var(--kcds-radius-full); /* Spacing t-shirts */ --k2-space-0: 0; --k2-space-px: 1px; --k2-space-0-5: 2px; --k2-space-xs: var(--kcds-spacing-4); --k2-space-sm: var(--kcds-spacing-8); --k2-space-md: var(--kcds-spacing-12); --k2-space-lg: var(--kcds-spacing-16); --k2-space-xl: var(--kcds-spacing-24); --k2-space-2xl: var(--kcds-spacing-32); --k2-space-3xl: var(--kcds-spacing-48); --k2-space-4xl: var(--kcds-spacing-64); /* : KCDS is KC's design system, so the DS default mark is the KC mark. Inlined as a data: URL so: (1) no relative URL = no CDN/dev path differences, (2) ::part can't reach into nested shadow roots, but custom properties DO inherit through shadow DOM cleanly, so the var() inside K2LogoStyles picks it up at any nesting depth. Apps that want a different default just override this var on / their app root; apps with their own brand asset slot it in via (highest-priority override). */ --k2-logo-mark-src: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 147 147' fill='none'%3E%3Cpath d='M130.475 16.3742C113.39 -0.712928 67.0054 -4.38757 36.9701 5.16651V71.3101L55.1566 48.3436H72.9757L49.0944 75.5359L73.1594 102.545H55.3403L36.9701 79.4862V102.545H23.2843V11.1378C20.7124 12.6995 18.3243 14.445 16.3954 16.3742C-5.46514 38.2383 -5.46514 108.608 16.3954 130.472C38.256 152.336 108.614 152.336 130.475 130.472C152.335 108.608 152.335 38.2383 130.475 16.3742ZM90.6112 87.5704C92.9074 90.4183 96.0304 91.7963 99.8881 91.7963C105.399 91.7963 109.073 89.3159 110.727 84.3551H125.515C124.045 90.2345 121.014 94.9197 116.605 98.3187C112.196 101.81 106.593 103.463 99.98 103.463C94.7445 103.463 90.1519 102.361 86.1105 100.064C82.069 97.6757 78.8542 94.4604 76.6498 90.2345C74.3535 86.0087 73.2513 81.0479 73.2513 75.4441C73.2513 69.8403 74.3535 64.9714 76.6498 60.7455C78.9461 56.5197 82.069 53.2125 86.1105 50.9158C90.1519 48.5273 94.8363 47.4249 99.98 47.4249C106.685 47.4249 112.288 49.0785 116.605 52.4776C121.014 55.7847 124.045 60.4699 125.515 66.5331H110.727C109.9 64.1446 108.614 62.3991 106.685 61.0211C104.848 59.6431 102.552 59.0001 99.7963 59.0001C95.8467 59.0001 92.8156 60.4699 90.5193 63.3178C88.223 66.1656 87.1208 70.1159 87.1208 75.3522C87.1208 80.5886 88.223 84.5388 90.5193 87.3867L90.6112 87.5704Z' fill='%23FF881A'/%3E%3Cpath d='M37.062 102.453V79.3944L55.4323 102.453H73.2514L49.1864 75.4442L73.0677 48.2518H55.2486L37.062 71.2183V5.07471C31.9184 6.7283 27.3258 8.74935 23.3762 11.1379V102.453H37.062Z' fill='white'/%3E%3Cpath d='M99.98 59.1839C102.736 59.1839 105.032 59.827 106.869 61.205C108.798 62.4911 110.084 64.3284 110.91 66.7169H125.698C124.229 60.6538 121.198 55.9686 116.789 52.6614C112.38 49.2624 106.869 47.6088 100.164 47.6088C94.9282 47.6088 90.3357 48.803 86.2942 51.0997C82.2528 53.3963 79.038 56.6117 76.8336 60.9294C74.5373 65.0633 73.4351 70.0241 73.4351 75.6279C73.4351 81.2318 74.5373 86.1925 76.8336 90.4184C79.1298 94.5524 82.2528 97.8595 86.2942 100.248C90.3357 102.545 95.0201 103.647 100.164 103.647C106.777 103.647 112.38 101.902 116.789 98.5026C121.198 95.0117 124.229 90.4184 125.698 84.5389H110.91C109.257 89.4997 105.583 91.9801 100.072 91.9801C96.1223 91.9801 93.0912 90.6021 90.7949 87.7543C88.4987 84.9064 87.3964 80.8643 87.3964 75.7198C87.3964 70.5753 88.4987 66.5332 90.7949 63.6853C93.0912 60.8375 96.2141 59.3676 100.072 59.3676L99.98 59.1839Z' fill='white'/%3E%3C/svg%3E"); --k2-logo-mark-size: 34px; /* canonical KCDS wide-lockup mark height */ /* Shadows */ --k2-shadow-xs: var(--kcds-shadow-xs, 0 1px 2px rgba(31,32,35,.04)); --k2-shadow-sm: var(--kcds-shadow-sm); --k2-shadow-md: var(--kcds-shadow-md); --k2-shadow-lg: var(--kcds-shadow-lg); --k2-shadow-xl: 0 24px 48px rgba(31,32,35,.12), 0 12px 24px rgba(31,32,35,.06); --k2-shadow-inset: inset 0 1px 2px rgba(31,32,35,.05); /* Transitions */ --k2-transition-fast: var(--kcds-transition-fast); --k2-transition-normal: var(--kcds-transition-normal); --k2-transition-slow: var(--kcds-transition-slow); --k2-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1); --k2-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --k2-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* Z-index */ --k2-z-base: 0; --k2-z-raised: 1; --k2-z-dropdown: 1000; --k2-z-sticky: 1020; --k2-z-modal: 1040; --k2-z-popover: 1060; --k2-z-tooltip: 1080; --k2-z-toast: 1100; /* Component slot tokens — all chained through KCDS layer */ /* Input */ --k2-input-height-sm: var(--kcds-input-height-sm); --k2-input-height-md: var(--kcds-input-height-md); --k2-input-height-lg: var(--kcds-input-height-lg); --k2-input-bg: var(--kcds-color-surface-default); --k2-input-border: var(--kcds-color-border-default); --k2-input-border-hover: var(--kcds-color-border-strong); --k2-input-border-focus: var(--kcds-color-border-focus); --k2-input-shadow: none; --k2-input-radius: var(--kcds-input-radius-md); --k2-input-radius-sm: var(--kcds-input-radius-sm); --k2-input-radius-lg: var(--kcds-input-radius-lg); --k2-input-padding-x: var(--kcds-input-padding-x); --k2-input-font-size: var(--kcds-input-font-size); --k2-input-placeholder-color: var(--kcds-color-text-secondary); /* Button — heights, paddings, radii, and font-weight all already density-driven via --kcds-* tokens overridden inside [data-kcds-density="compact"]. Comfortable: 16px Regular(400) labels per actions.md. Compact: 14px Bold(700). */ --k2-button-height-sm: var(--kcds-button-height-sm); --k2-button-height-md: var(--kcds-button-height-md); --k2-button-height-lg: var(--kcds-button-height-lg); --k2-button-font-size-sm: var(--kcds-button-font-size-sm); --k2-button-font-size-md: var(--kcds-button-font-size-md); --k2-button-font-size-lg: var(--kcds-button-font-size-lg); --k2-button-padding-x-sm: var(--kcds-button-padding-x-sm); --k2-button-padding-x-md: var(--kcds-button-padding-x-md); --k2-button-padding-x-lg: var(--kcds-button-padding-x-lg); --k2-button-radius: var(--kcds-button-radius-md); --k2-button-radius-sm: var(--kcds-button-radius-sm); --k2-button-radius-lg: var(--kcds-button-radius-lg); --k2-button-font-weight: var(--kcds-button-font-weight); --k2-button-shadow: none; /* Card (component reads -border-radius / -border-color naming) */ --k2-card-border-radius: var(--kcds-card-radius); --k2-card-padding: var(--kcds-card-padding); --k2-card-bg: var(--kcds-color-surface-default); --k2-card-border-color: var(--kcds-color-border-subtle); --k2-card-shadow: var(--kcds-shadow-sm); /* Badge */ --k2-badge-radius: var(--kcds-badge-radius); --k2-badge-padding: var(--kcds-badge-padding); --k2-badge-font-size: var(--kcds-badge-font-size); --k2-badge-font-weight: var(--kcds-badge-font-weight); /* Alert / Toast */ --k2-alert-radius: var(--kcds-alert-radius); --k2-alert-padding: var(--kcds-alert-padding); --k2-toast-radius: var(--kcds-toast-radius); --k2-toast-padding: 12px 16px; --k2-toast-bg: var(--kcds-color-surface-dark); --k2-toast-color: var(--kcds-color-on-primary); --k2-toast-shadow: var(--kcds-shadow-lg); /* Dialog */ /* Dialog renders on the elevated surface step per designer doc § * "Surface hierarchy" (line 4129) — "Modals and popovers sit lighter * still." In light theme surface-elevated == surface-default == #FFF, * so this is a no-op there; in dark it lifts to #21272D. */ --k2-dialog-bg: var(--kcds-color-surface-elevated); --k2-dialog-radius: var(--kcds-dialog-radius); --k2-dialog-shadow: var(--kcds-shadow-lg); /* Dropdown / Popover / Tooltip */ --k2-dropdown-bg: var(--kcds-color-surface-elevated); --k2-dropdown-radius: var(--kcds-dropdown-radius); --k2-dropdown-border: var(--kcds-color-border-subtle); --k2-dropdown-shadow: var(--kcds-shadow-lg); --k2-tooltip-bg: var(--kcds-color-surface-dark); --k2-tooltip-color: var(--kcds-color-on-primary); --k2-tooltip-radius: var(--kcds-tooltip-radius); --k2-tooltip-padding: var(--kcds-tooltip-padding); --k2-tooltip-font-size: var(--kcds-text-caption); /* Tabs (component reads --k2-tab-active-indicator for the underline) */ --k2-tab-color: var(--kcds-color-text-tertiary); --k2-tab-color-hover: var(--kcds-color-text-primary); --k2-tab-color-active: var(--kcds-color-primary); --k2-tab-active-indicator: var(--kcds-color-primary); --k2-tab-border: var(--kcds-color-border-subtle); --k2-tabs-nav-border: 1px solid var(--kcds-color-border-subtle); /* Avatar */ --k2-avatar-size-sm: var(--kcds-avatar-size-sm); --k2-avatar-size-md: var(--kcds-avatar-size-md); --k2-avatar-size-lg: var(--kcds-avatar-size-lg); --k2-avatar-size-xl: var(--kcds-avatar-size-xl); --k2-avatar-radius: var(--kcds-radius-full); --k2-avatar-bg: var(--kcds-color-surface-canvas); --k2-avatar-color: var(--kcds-color-text-tertiary); /* Table */ --k2-table-header-bg: var(--kcds-color-surface-canvas); --k2-table-header-color: var(--kcds-color-text-tertiary); --k2-table-header-font-size: var(--kcds-table-header-font-size); --k2-table-header-font-weight: var(--kcds-table-header-font-weight); --k2-table-row-border: var(--kcds-color-border-subtle); --k2-table-row-hover-bg: var(--kcds-color-surface-canvas); --k2-table-row-selected-bg: var(--kcds-color-primary-tint); --k2-table-cell-padding: var(--kcds-table-cell-padding); --k2-table-font-size: var(--kcds-table-font-size); /* Switch / checkbox / radio */ --k2-switch-off-bg: var(--kcds-gray-300); --k2-switch-on-bg: var(--kcds-color-primary); --k2-switch-thumb-bg: var(--kcds-gray-0); --k2-checkbox-bg: var(--kcds-color-surface-default); --k2-checkbox-border: 2px solid var(--kcds-color-border-default); --k2-checkbox-bg-checked: var(--kcds-color-primary); --k2-checkbox-border-checked: var(--kcds-color-primary); --k2-checkbox-icon-color: var(--kcds-color-on-primary); --k2-checkbox-radius: var(--kcds-radius-4); --k2-radio-border: 2px solid var(--kcds-color-border-default); --k2-radio-border-checked: 2px solid var(--kcds-color-primary); --k2-radio-border-hover: 2px solid var(--kcds-color-primary); --k2-radio-dot-color: var(--kcds-color-primary); --k2-radio-bg: var(--kcds-color-surface-default); /* Progress */ --k2-progress-track: var(--kcds-color-border-subtle); --k2-progress-fill: var(--kcds-color-primary); --k2-progress-radius: var(--kcds-progress-radius); --k2-progress-height: var(--kcds-progress-height); /* Stepper */ --k2-stepper-line: var(--kcds-color-border-subtle); --k2-stepper-active: var(--kcds-color-primary); --k2-stepper-complete: var(--kcds-color-status-success); /* Sidebar / nav */ --k2-sidebar-bg: var(--kcds-color-surface-default); --k2-sidebar-fg: var(--kcds-color-text-primary); --k2-sidebar-muted: var(--kcds-color-text-tertiary); --k2-sidebar-active-bg: var(--kcds-color-primary-tint); --k2-sidebar-active-fg: var(--kcds-color-on-primary-tint); --k2-sidebar-border: var(--kcds-color-border-subtle); /* Link */ --k2-link-color: var(--kcds-color-text-link); --k2-link-hover-color: var(--kcds-color-primary-hover); } /* ============================================================ AXIS OVERRIDES — only touch the --kcds-* layer. The K2 bridge above resolves the var() chain at consume time, so axis values propagate into nested-theme subtrees through inheritance — even when a child element has [data-theme="kcds"]. ============================================================ */ /* ── Dark theme ── (mirrors notes/kcds-design-system.html lines 178-283) * Designer rules followed verbatim: * • Surface stepping (canvas → surface → elevated) communicates depth. * • Status colors LIFT to *-400/300 palette values for dark contrast. * • Tint/fill become rgba overlays so they don't read as "glowing burns". * • Shadow tokens INTENTIONALLY stay at their light values — they * degrade gracefully on dark surfaces (the rgba(31,32,35,0.04) base * is near-invisible against #181D22). DO NOT redeclare shadows here. * Depth comes from surface stepping + intrinsic 1px borders on cards * and elevated containers (designer doc §"Elevation in dark", line 4211). */ /* The K2App nested-theme architecture sets data-theme="kcds" on its * `.main` content frame so the KCDS token block at :root,[data-theme="kcds"] * re-applies inside that subtree. That same block re-declares K2 bridges * like --k2-bg-tertiary to LIGHT values, which would otherwise defeat the * dark-axis override above. Match BOTH the document-root case AND the * nested-frame case so the dark cascade reaches deep components. */ [data-kcds-theme="dark"], [data-kcds-theme="dark"] [data-theme="kcds"], [data-theme="kcds"][data-kcds-theme="dark"] { /* Surfaces */ --kcds-color-surface-default: var(--kcds-darkgray-surface); --kcds-color-surface-canvas: var(--kcds-darkgray-canvas); --kcds-color-surface-subtle: var(--kcds-darkgray-subtle); --kcds-color-surface-elevated: var(--kcds-darkgray-elevated); --kcds-color-surface-disabled: #232830; --kcds-color-surface-dark: var(--kcds-darkgray-elevated); --kcds-color-surface-tile-day: var(--kcds-darkgray-elevated); /* Text */ --kcds-color-text-primary: #E8EAED; --kcds-color-text-secondary: #A0A8B0; --kcds-color-text-tertiary: #74808A; --kcds-color-text-disabled: #525C66; --kcds-color-text-on-dark: #FFFFFF; /* Border */ --kcds-color-border-default: var(--kcds-darkgray-border-default); --kcds-color-border-subtle: var(--kcds-darkgray-border); --kcds-color-border-strong: var(--kcds-darkgray-border-strong); /* Status — lifted for dark contrast (designer table, line 4200-4209) */ --kcds-color-status-success: #4ADE80; --kcds-color-status-error: #F87171; --kcds-color-status-warning: #FBBF24; --kcds-color-status-info: #60A5FA; --kcds-color-status-featured: #A78BFA; --kcds-color-ai-suggestion: #A78BFA; /* Status tint backgrounds become rgba overlays (designer line 277-283) */ --kcds-green-50: rgba(53, 192, 76, 0.15); --kcds-red-50: rgba(240, 62, 62, 0.15); --kcds-blue-50: rgba(50, 157, 255, 0.15); --kcds-violet-50: rgba(133, 67, 218, 0.18); /* K2 bridge tokens bound to fixed greys need a dark-mode override. * --k2-bg-tertiary is the chrome's grey stage; let it sit one step above * the canvas (slightly lighter) so dark surfaces pop against it. */ --k2-bg-tertiary: var(--kcds-darkgray-elevated); --k2-surface-overlay: rgba(15, 20, 25, 0.85); --k2-surface-glass: rgba(15, 20, 25, 0.72); /* K2 component neutrals — light-mode greys are too bright in dark. * Switch track + similar surfaces use --k2-color-neutral-300 by * default; without a dark override that token resolves to #EAEAEA * (light grey) against a 15,20,25 canvas → ugly contrast inversion. * Repoint the neutral scale so components inherit dark-appropriate * greys without each component needing its own override. */ --k2-color-neutral-100: var(--kcds-darkgray-elevated); --k2-color-neutral-200: var(--kcds-darkgray-border); --k2-color-neutral-300: var(--kcds-darkgray-border-strong); --k2-color-neutral-400: #4A5562; --k2-color-neutral-500: #5C6773; --k2-color-neutral-600: #74808A; --k2-color-neutral-700: #A0A8B0; --k2-color-neutral-800: #C8CCD2; --k2-color-neutral-900: #E8EAED; /* Primary surfaces soften in dark — full-saturation hue against a dark canvas reads too vibrant. Mixing 14% of the dark surface back into the primary keeps the hue identifiable while reducing perceived brightness. Affects everything bound to --k2-color- primary-500 (k2-button primary, k2-progress-bar fill, k2-tab active indicator, etc); kcds-level tokens stay untouched so designer-spec'd surfaces (e.g. category chips, hero accents) keep their canonical hue. */ --k2-color-primary-500: color-mix(in srgb, var(--kcds-color-primary-500) 86%, var(--kcds-color-surface-default)); /* Track background — tuned literal: 1.67:1 contrast against * darkgray-surface, the canonical's own ratio. */ --kcds-color-track-bg: #3A424B; /* Tile-* tints become translucent overlays in dark — matches the * canonical's dark-mode tile treatment (colors.md §"Dark-theme * remapping: pastels become rgba overlays"). FG values lift to * the dark-theme accent text colors used elsewhere. */ --kcds-color-tile-info-bg: rgba(50, 157, 255, 0.18); --kcds-color-tile-info-fg: #93C5FD; --kcds-color-tile-featured-bg: rgba(133, 67, 218, 0.18); --kcds-color-tile-featured-fg: #C4B5FD; --kcds-color-tile-success-bg: rgba(53, 192, 76, 0.18); --kcds-color-tile-success-fg: #4ADE80; --kcds-color-tile-warning-bg: rgba(251, 191, 36, 0.18); --kcds-color-tile-warning-fg: #FBBF24; --kcds-color-tile-error-bg: rgba(248, 113, 113, 0.22); --kcds-color-tile-error-fg: #FCA5A5; --kcds-color-tile-neutral-bg: rgba(255, 255, 255, 0.06); --kcds-color-tile-neutral-fg: #BCC6CC; /* Status soft-background tints become translucent overlays in dark — * matching the *-50 primitives' dark-theme treatment above. */ --kcds-color-status-success-bg: rgba(53, 192, 76, 0.15); --kcds-color-status-error-bg: rgba(248, 113, 113, 0.15); --kcds-color-status-warning-bg: rgba(251, 191, 36, 0.15); --kcds-color-status-info-bg: rgba(96, 165, 250, 0.15); /* Shadows intentionally NOT redeclared — see header comment. */ } /* Legacy orange in dark — only when no product category is set, matching * the designer's :not([data-kcds-product-category]) guard (line 212). The * category-specific blocks below redeclare these tokens directly for the * grow / learn / perform / comply / platform cases. * * Scoped to :root so the rule only matches the document root. The K2App * shell sets data-kcds-theme="dark" on inner elements (.main, k2-app * host) as well — those don't carry the product-category attribute, so * the un-scoped form would fire on .main and shadow over whatever the * cascade set (the category-correct dark colour). With :root the * inner elements just inherit. */ :root[data-kcds-theme="dark"]:not([data-kcds-product-category]) { --kcds-color-primary: #FF881A; --kcds-color-primary-hover: #FF9D40; --kcds-color-primary-active: #E0780F; --kcds-color-primary-fill: rgba(255, 136, 26, 0.18); --kcds-color-primary-tint: rgba(255, 136, 26, 0.10); /* AA fix: white-on-#FF881A is 2.39:1 (fails). Near-black is 6.68:1. */ --kcds-color-on-primary: #1F2226; --kcds-color-on-primary-tint:#FFB060; --kcds-color-text-link: #FFB060; --kcds-color-border-focus: #FF881A; /* Extended primary scale (K2-only — designer doesn't ramp Tier 2). */ --kcds-color-primary-50: rgba(255,136,26,0.10); --kcds-color-primary-100: rgba(255,136,26,0.18); --kcds-color-primary-200: rgba(255,136,26,0.24); --kcds-color-primary-300: #FF7A00; --kcds-color-primary-400: #FF7A00; --kcds-color-primary-500: #FF881A; --kcds-color-primary-600: #FF9D40; --kcds-color-primary-700: #FFB060; } /* ── Product categories — light ── */ [data-kcds-product-category="grow"] { --kcds-color-primary: #0EA5A5; --kcds-color-primary-hover: #0C8989; --kcds-color-primary-active: #0B7C7C; --kcds-color-primary-fill: #B5EBEB; --kcds-color-primary-tint: #E0F7F7; --kcds-color-on-primary-tint:#0B7C7C; --kcds-color-text-link: #0EA5A5; --kcds-color-border-focus: #0EA5A5; --kcds-color-primary-50: #E0F7F7; --kcds-color-primary-100: #B5EBEB; --kcds-color-primary-200: #8DDFDF; --kcds-color-primary-300: #4ECBCB; --kcds-color-primary-400: #1AB3B3; --kcds-color-primary-500: #0EA5A5; --kcds-color-primary-600: #0C8989; --kcds-color-primary-700: #0B7C7C; } [data-kcds-product-category="learn"] { --kcds-color-primary: #329DFF; --kcds-color-primary-hover: #1E6FBF; --kcds-color-primary-active: #1E5798; --kcds-color-primary-fill: #C7E2FF; --kcds-color-primary-tint: #E4F5FF; --kcds-color-on-primary-tint:#1E5798; --kcds-color-text-link: #329DFF; --kcds-color-border-focus: #329DFF; --kcds-color-primary-50: #E4F5FF; --kcds-color-primary-100: #C7E2FF; --kcds-color-primary-200: #9CCEFF; --kcds-color-primary-300: #6BB6FF; --kcds-color-primary-400: #4AA8FF; --kcds-color-primary-500: #329DFF; --kcds-color-primary-600: #1E6FBF; --kcds-color-primary-700: #1E5798; } [data-kcds-product-category="perform"] { --kcds-color-primary: #4F46E5; --kcds-color-primary-hover: #4338CA; --kcds-color-primary-active: #3730A3; --kcds-color-primary-fill: #E0E7FF; --kcds-color-primary-tint: #EEF2FF; --kcds-color-on-primary-tint:#3730A3; --kcds-color-text-link: #4F46E5; --kcds-color-border-focus: #4F46E5; --kcds-color-primary-50: #EEF2FF; --kcds-color-primary-100: #E0E7FF; --kcds-color-primary-200: #C7D2FE; --kcds-color-primary-300: #A5B4FC; --kcds-color-primary-400: #818CF8; --kcds-color-primary-500: #4F46E5; --kcds-color-primary-600: #4338CA; --kcds-color-primary-700: #3730A3; } [data-kcds-product-category="comply"] { --kcds-color-primary: #475569; --kcds-color-primary-hover: #3D4756; --kcds-color-primary-active: #334155; --kcds-color-primary-fill: #E2E8F0; --kcds-color-primary-tint: #F1F5F9; --kcds-color-on-primary-tint:#334155; --kcds-color-text-link: #475569; --kcds-color-border-focus: #475569; --kcds-color-primary-50: #F1F5F9; --kcds-color-primary-100: #E2E8F0; --kcds-color-primary-200: #CBD5E1; --kcds-color-primary-300: #94A3B8; --kcds-color-primary-400: #64748B; --kcds-color-primary-500: #475569; --kcds-color-primary-600: #3D4756; --kcds-color-primary-700: #334155; } [data-kcds-product-category="platform"] { --kcds-color-primary: #0891B2; --kcds-color-primary-hover: #0E7490; --kcds-color-primary-active: #155E75; --kcds-color-primary-fill: #CFFAFE; --kcds-color-primary-tint: #ECFEFF; --kcds-color-on-primary-tint:#155E75; --kcds-color-text-link: #0891B2; --kcds-color-border-focus: #0891B2; --kcds-color-primary-50: #ECFEFF; --kcds-color-primary-100: #CFFAFE; --kcds-color-primary-200: #A5F3FC; --kcds-color-primary-300: #67E8F9; --kcds-color-primary-400: #22D3EE; --kcds-color-primary-500: #0891B2; --kcds-color-primary-600: #0E7490; --kcds-color-primary-700: #155E75; } /* ── Dark × Categories ── */ [data-kcds-theme="dark"][data-kcds-product-category="grow"] { /* PD-205: OKLCH L=0.55 calibration. Lowered from L=0.655 (#0EA5A5) to clear WCAG AA on white (was 3.02:1, now 4.64:1). */ --kcds-color-primary: #0A8282; --kcds-color-primary-hover: #238E8E; --kcds-color-primary-active: #076B6B; --kcds-color-primary-fill: rgba(14,165,165,0.20); --kcds-color-primary-tint: rgba(14,165,165,0.10); --kcds-color-on-primary-tint:#5EEAD4; --kcds-color-text-link: #5EEAD4; --kcds-color-border-focus: #0EA5A5; --kcds-color-primary-50: rgba(14,165,165,0.10); --kcds-color-primary-100: rgba(14,165,165,0.20); --kcds-color-primary-200: rgba(14,165,165,0.30); --kcds-color-primary-300: #2BC5C5; --kcds-color-primary-400: #2BC5C5; --kcds-color-primary-500: #0EA5A5; --kcds-color-primary-600: #2BC5C5; --kcds-color-primary-700: #5EEAD4; } [data-kcds-theme="dark"][data-kcds-product-category="learn"] { /* PD-205: OKLCH L=0.55 calibration. Lowered from L=0.684 (#329DFF) to clear WCAG AA on white (was 2.84:1, now 4.86:1). */ --kcds-color-primary: #0874C8; --kcds-color-primary-hover: #2080D5; --kcds-color-primary-active: #065FA6; --kcds-color-primary-fill: rgba(50,157,255,0.20); --kcds-color-primary-tint: rgba(50,157,255,0.10); --kcds-color-on-primary-tint:#93C5FD; --kcds-color-text-link: #93C5FD; --kcds-color-border-focus: #329DFF; --kcds-color-primary-50: rgba(50,157,255,0.10); --kcds-color-primary-100: rgba(50,157,255,0.20); --kcds-color-primary-200: rgba(50,157,255,0.30); --kcds-color-primary-300: #5AB1FF; --kcds-color-primary-400: #5AB1FF; --kcds-color-primary-500: #329DFF; --kcds-color-primary-600: #5AB1FF; --kcds-color-primary-700: #93C5FD; } [data-kcds-theme="dark"][data-kcds-product-category="perform"] { /* PD-205: OKLCH L=0.55 calibration. Lowered from L=0.585 (#6366F1) to clear WCAG AA on white (was 4.47:1 borderline, now 5.20:1). */ --kcds-color-primary: #5A5BE5; --kcds-color-primary-hover: #6468F3; --kcds-color-primary-active: #4943CC; --kcds-color-primary-fill: rgba(99,102,241,0.22); --kcds-color-primary-tint: rgba(99,102,241,0.12); --kcds-color-on-primary-tint:#A5B4FC; --kcds-color-text-link: #A5B4FC; --kcds-color-border-focus: #6366F1; --kcds-color-primary-50: rgba(99,102,241,0.12); --kcds-color-primary-100: rgba(99,102,241,0.22); --kcds-color-primary-200: rgba(99,102,241,0.32); --kcds-color-primary-300: #818CF8; --kcds-color-primary-400: #818CF8; --kcds-color-primary-500: #6366F1; --kcds-color-primary-600: #818CF8; --kcds-color-primary-700: #A5B4FC; } [data-kcds-theme="dark"][data-kcds-product-category="comply"] { /* PD-205: comply is the floor case (already at OKLCH L=0.554, 4.76:1 on white). Slate base unchanged; hover/active per playground values. */ --kcds-color-primary: #64748B; --kcds-color-primary-hover: #59687F; --kcds-color-primary-active: #506076; --kcds-color-primary-fill: rgba(100,116,139,0.20); --kcds-color-primary-tint: rgba(100,116,139,0.10); --kcds-color-on-primary-tint:#CBD5E1; --kcds-color-text-link: #CBD5E1; --kcds-color-border-focus: #64748B; --kcds-color-primary-50: rgba(100,116,139,0.10); --kcds-color-primary-100: rgba(100,116,139,0.20); --kcds-color-primary-200: rgba(100,116,139,0.30); --kcds-color-primary-300: #94A3B8; --kcds-color-primary-400: #94A3B8; --kcds-color-primary-500: #64748B; --kcds-color-primary-600: #566377; --kcds-color-primary-700: #475569; } [data-kcds-theme="dark"][data-kcds-product-category="platform"] { /* PD-205: OKLCH L=0.55 calibration. Lowered from L=0.797 (#22D3EE, the biggest spotlight in the system) to clear WCAG AA on white (was 1.81:1, now 4.68:1). */ --kcds-color-primary: #0A8091; --kcds-color-primary-hover: #228C9D; --kcds-color-primary-active: #066978; --kcds-color-primary-fill: rgba(34,211,238,0.20); --kcds-color-primary-tint: rgba(34,211,238,0.10); --kcds-color-on-primary-tint:#67E8F9; --kcds-color-text-link: #67E8F9; --kcds-color-border-focus: #22D3EE; --kcds-color-primary-50: rgba(34,211,238,0.10); --kcds-color-primary-100: rgba(34,211,238,0.20); --kcds-color-primary-200: rgba(34,211,238,0.30); --kcds-color-primary-300: #67E8F9; --kcds-color-primary-400: #67E8F9; --kcds-color-primary-500: #22D3EE; --kcds-color-primary-600: #67E8F9; --kcds-color-primary-700: #A5F3FC; } /* ── Density compact ── * Two selectors: the attribute for whole-document toggling, the * class for side-by-side scoped comparison (designer's pattern). * Both override only --kcds-* component metrics; the K2 bridge * follows via the var() chain. */ [data-kcds-density="compact"], .density--compact { --kcds-button-height-sm: 28px; --kcds-button-height-md: 32px; --kcds-button-height-lg: 40px; --kcds-button-padding-x-sm: 10px; --kcds-button-padding-x-md: 12px; --kcds-button-padding-x-lg: 16px; --kcds-button-font-size-sm: 13px; --kcds-button-font-size-md: 14px; --kcds-button-font-size-lg: 14px; --kcds-button-font-weight: 700; --kcds-button-radius-sm: 8px; --kcds-button-radius-md: 8px; --kcds-button-radius-lg: 8px; --kcds-input-height-sm: 28px; --kcds-input-height-md: 32px; --kcds-input-height-lg: 40px; --kcds-input-radius-sm: 6px; --kcds-input-radius-md: 8px; --kcds-input-radius-lg: 8px; --kcds-input-padding-x: 12px; --kcds-input-font-size: 14px; --kcds-card-radius: 8px; --kcds-card-padding: 16px; --kcds-dialog-radius: 8px; --kcds-dropdown-radius:8px; --kcds-toast-radius: 8px; --kcds-alert-radius: 8px; --kcds-alert-padding: 12px; --kcds-badge-padding: 2px 8px; --kcds-badge-font-size: 11px; --kcds-table-cell-padding: 8px 12px; --kcds-table-font-size: 13px; --kcds-avatar-size-sm: 24px; --kcds-avatar-size-md: 32px; --kcds-avatar-size-lg: 40px; --kcds-avatar-size-xl: 56px; --kcds-progress-height: 6px; --kcds-icon-size-sm: 12px; --kcds-icon-size-md: 14px; --kcds-icon-size-lg: 16px; /* Density-coupled compact overrides — full 9-token set per spec. */ --kcds-density-radius-control: 4px; --kcds-density-radius-card: 8px; --kcds-density-radius-container: 8px; --kcds-density-gap: 12px; --kcds-density-section-gap: 24px; --kcds-density-page-padding: 16px; --kcds-density-text-base: 14px; --kcds-density-input-height: 32px; --kcds-density-button-height: 32px; /* compact medium */ } /* Rule 5 — Mobile forces comfortable density (density.md). On a touch * viewport, compact would produce 28-32px hit targets below the 44×44 * accessibility floor. Override every density-coupled token back to * comfortable values regardless of [data-kcds-density="compact"]. */ @media (pointer: coarse) { [data-kcds-density="compact"] { --kcds-density-radius-control: 16px; --kcds-density-radius-card: 16px; --kcds-density-radius-container: 32px; --kcds-density-gap: 16px; --kcds-density-section-gap: 32px; --kcds-density-page-padding: 24px; --kcds-density-text-base: 16px; --kcds-density-input-height: 52px; --kcds-density-button-height: 56px; } } /* ============================================================ Motion system — 5 durations × 4 easings + named keyframes ============================================================ */ :root { --kcds-duration-instant: 0ms; --kcds-duration-fast: 100ms; --kcds-duration-default: 200ms; --kcds-duration-slow: 300ms; --kcds-duration-deliberate: 500ms; --kcds-ease-out: cubic-bezier(0, 0, 0.2, 1); /* default — appearing */ --kcds-ease-in: cubic-bezier(0.4, 0, 1, 1); /* disappearing */ --kcds-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* continuous */ --kcds-ease-spring: cubic-bezier(0.16, 1, 0.3, 1); /* personality / celebration */ } /* Named animation keyframes — use these, don't invent new ones. */ @keyframes kcds-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes kcds-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes kcds-slide-in-end { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } [dir="rtl"] @keyframes kcds-slide-in-end { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes kcds-modal-enter { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes kcds-press-feedback { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.97); } } @keyframes kcds-spinner { to { transform: rotate(360deg); } } @keyframes kcds-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* Global prefers-reduced-motion guard — required by spec. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; } } /* ============================================================ Lang-based font swap — Arabic / Hebrew get Noto Sans variants. Designer rule: Arabic uses 17px base + line-height 1.7. ============================================================ */ :lang(ar), [lang="ar"] { --kcds-font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --kcds-text-body-m: 17px; --kcds-line-height-relaxed: 1.7; } :lang(he), [lang="he"] { --kcds-font-family: 'Noto Sans Hebrew', 'Segoe UI', Tahoma, sans-serif; } /* ============================================================ Utilities — drop-in CSS classes consumers paste anywhere. ============================================================ */ .kcds-line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .kcds-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kcds-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kcds-line-clamp-none { display: block; -webkit-line-clamp: unset; overflow: visible; } .kcds-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; } /* CSS Grid base with min-width:0 on every child. Default `min-width:auto` * means a wide child (long course title, code block, table row) can force * its track to expand and push horizontal scroll to the page itself — * the canonical's Overflow Pattern #3 (08-canonical-references/README.md * v0.12.1). Compose with your own grid-template-* declarations. */ .kcds-grid { display: grid; } .kcds-grid > * { min-width: 0; } /* `display: contents` for layout-transparent page custom elements. Apply to * any custom element that wraps multiple sections inside a flex/grid parent * (typically
or similar). Without it, the custom element * becomes an opaque box between the parent's gap/grid rules and the section * children — breaking vertical rhythm. With it, the children participate in * the parent's layout directly. * *
* *
…
← these now get the 24px gap *
…
* *
*/ .kcds-page-host { display: contents; } /* ============================================================ GLOBAL SCROLLBAR THEMING Browsers default to OS scrollbars — on a dark KC surface that renders as a glaring white bar. Resolve through semantic tokens so the scrollbars flip with the theme automatically (canonical reference §5 v0.12.5). ============================================================ */ * { scrollbar-color: var(--kcds-color-text-tertiary) var(--kcds-color-surface-subtle); scrollbar-width: thin; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--kcds-color-surface-subtle); } *::-webkit-scrollbar-thumb { background: var(--kcds-color-text-tertiary); border: 2px solid var(--kcds-color-surface-subtle); border-radius: var(--kcds-radius-full, 999px); } *::-webkit-scrollbar-thumb:hover { background: var(--kcds-color-text-secondary); } *::-webkit-scrollbar-corner { background: var(--kcds-color-surface-subtle); } /* ============================================================ GLOBAL LINK THEMING Default color follows the theme link token, not the browser blue. Themes override --kcds-color-text-link to retune. ============================================================ */ a { color: var(--kcds-color-text-link, var(--kcds-color-primary, #FF881A)); text-decoration: none; transition: color 120ms ease; } a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--kcds-color-border-focus, var(--kcds-color-primary, #FF881A)); outline-offset: 2px; border-radius: 2px; } /* ============================================================ ACCESSIBILITY UTILITIES — required by accessibility.md ============================================================ */ /* .sr-only — visually hidden but available to assistive tech. Mandatory * on every page baseline; many KC components emit screen-reader-only * text (stepper progress, status badge prefixes, table captions, icon- * only buttons, live regions) and assume this class is defined. */ .sr-only, .kcds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .sr-only-focusable:focus, .sr-only-focusable:focus-within, .kcds-sr-only-focusable:focus, .kcds-sr-only-focusable:focus-within { position: static; width: auto; height: auto; padding: revert; margin: revert; overflow: visible; clip: auto; white-space: normal; } /* Viewport-conditional utilities — explicit display rules so a phone-only * component doesn't render on desktop and vice versa. */ .kcds-mobile-only { display: revert; } .kcds-desktop-only { display: none; } @media (min-width: 768px) { .kcds-mobile-only { display: none; } .kcds-desktop-only { display: revert; } } /* Bidi isolation — numbers, IDs, codes, URLs, currency, timestamps * stay LTR inside RTL UI. Without this, "Order #1234" reorders to * "1234# Order" in Arabic / Hebrew context. (multilingual.md) */ .kcds-bidi-ltr, .kcds-code, .kcds-number, .kcds-id, .kcds-currency, .kcds-timestamp { unicode-bidi: isolate; direction: ltr; } /* German compound-word hyphenation — long compounds break tight layouts * without this. (multilingual.md → German) */ [lang="de"] { hyphens: auto; }