/* ============================================================ 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; --kcds-color-text-primary: #1F2023; /* learner / public surfaces */ --kcds-color-text-primary-admin: #2C3E46; /* admin / workspace surfaces (slightly cooler) */ --kcds-color-text-secondary: #9A9A9A; --kcds-color-text-tertiary: #74838A; --kcds-color-text-disabled: #CCD5DD; --kcds-color-text-link: #FF881A; --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: #F3F7F9; --kcds-color-surface-elevated: #FFFFFF; --kcds-color-surface-dark: #1F2023; /* 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; /* Status text variants — WCAG AA-safe (>= 4.5 : 1) on white AND on same-hue tinted tag-pill backgrounds. Use for inline text; keep the base --kcds-color-status-* for icons, borders, and fills. */ --kcds-color-status-error-text: #C92A2A; --kcds-color-status-warning-text: #B45309; --kcds-color-status-info-text: #0B63CE; --kcds-color-status-success-text: #137620; /* 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; /* 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. */ --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-text-base: 16px; --kcds-density-input-height: 56px; /* 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-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: 12px; --kcds-card-padding: 24px; --kcds-dialog-radius: 12px; --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"] { /* 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 */ --k2-focus-ring: 0 0 0 3px color-mix(in srgb, var(--kcds-color-border-focus) 35%, transparent); /* 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); /* Shadows */ --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 */ --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). */ [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-dark: var(--kcds-darkgray-elevated); /* Text */ --kcds-color-text-primary: #E8EAED; --kcds-color-text-primary-admin: #E8EAED; --kcds-color-text-secondary: #A0A8B0; --kcds-color-text-tertiary: #74808A; --kcds-color-text-disabled: #525C66; /* 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 text — dark-mode values match base (already lifted for contrast) */ --kcds-color-status-error-text: #F87171; --kcds-color-status-warning-text: #FBBF24; --kcds-color-status-info-text: #60A5FA; --kcds-color-status-success-text: #35C04C; /* 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); /* Track background — tuned literal: 1.67:1 contrast against * darkgray-surface, the canonical's own ratio. */ --kcds-color-track-bg: #3A424B; /* Tile-error bg becomes a translucent red overlay in dark — matches * the canonical's `rgba(248, 113, 113, 0.22)`. Other tile-* tints * stay as light values; they remain readable on dark surfaces. */ --kcds-color-tile-error-bg: rgba(248, 113, 113, 0.22); /* 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. */ [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); --kcds-color-on-primary: #FFFFFF; --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; } /* KC Comply = TEAL (KCDS v1.3.3, ADR-013). Light primary #0A7A7A is deepened from teal-500 #0EA5A5 for WCAG AA on white (PD-294). Previously this vendored copy carried the pre-v1.3.1 slate spec and the teal was applied via a phishing.css overlay; PHISH-95 folds the canonical v1.3.3 Comply teal into the category block and retires that overlay. */ [data-kcds-product-category="comply"] { --kcds-color-primary: #0A7A7A; --kcds-color-primary-hover: #096B6B; --kcds-color-primary-active: #085C5C; --kcds-color-primary-fill: #B5EBEB; --kcds-color-primary-tint: #E0F7F7; --kcds-color-on-primary-tint:#085C5C; --kcds-color-text-link: #0A7A7A; --kcds-color-border-focus: #0A7A7A; --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="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"] { --kcds-color-primary: #0EA5A5; --kcds-color-primary-hover: #2BC5C5; --kcds-color-primary-active: #0B8B8B; --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"] { --kcds-color-primary: #329DFF; --kcds-color-primary-hover: #5AB1FF; --kcds-color-primary-active: #2580D8; --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"] { --kcds-color-primary: #6366F1; --kcds-color-primary-hover: #818CF8; --kcds-color-primary-active: #4F46E5; --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"] { /* Comply dark = brighter teal (reads better on dark surfaces; matches the KCDS teal dark ramp). The light-mode AA deepening does not apply on dark. (KCDS v1.3.3.) */ --kcds-color-primary: #0EA5A5; --kcds-color-primary-hover: #2BC5C5; --kcds-color-primary-active: #0B8B8B; --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="platform"] { --kcds-color-primary: #22D3EE; --kcds-color-primary-hover: #67E8F9; --kcds-color-primary-active: #0E96B0; --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. */ --kcds-density-radius-control: 4px; --kcds-density-radius-card: 8px; --kcds-density-radius-container: 8px; --kcds-density-gap: 12px; --kcds-density-text-base: 14px; --kcds-density-input-height: 32px; } /* ============================================================ 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; }