/* =========================================== KANOWAH DESIGN SYSTEM — ENTRY POINT Imports all token layers, then the shared reset that depends on them. =========================================== */ /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVES Layer 1: Raw design values. These never change per theme. =========================================== */ /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE COLORS Raw color values. Never change per theme. =========================================== */ :root { /* ---- Neutrals ---- */ --p-color-neutral-5: #141a0e; --p-color-neutral-10: #212918; --p-color-neutral-20: #283517; --p-color-neutral-30: #3d4a2f; --p-color-neutral-40: #646d57; --p-color-neutral-60: #9fa597; --p-color-neutral-70: #cacdc5; --p-color-neutral-80: #e4e6e0; --p-color-neutral-90: #f9f9f6; --p-color-neutral-100: #fff; /* ---- Special ---- */ --p-color-transparent: #fff0; --p-color-frosty-light: #f5f4f180; /* ---- Brand (Lime / Yellow-Green) ---- 60 and 80 came back from the Figma branding file, which carried mid-tones the CSS never had — the CSS only ever modeled the app layer. Step numbers placed by relative luminance, so the ramp stays ordered. */ --p-color-brand-20: #383d00; --p-color-brand-40: #5d6600; --p-color-brand-60: #888f00; --p-color-brand-70: #a3b200; --p-color-brand-80: #becc00; --p-color-brand-90: #efff44; --p-color-brand-95: #fbffcc; /* ---- Info (Blue) ---- */ --p-color-info-40: #003550; --p-color-info-60: #027fa9; --p-color-info-70: #03a4da; --p-color-info-80: #8fd3f8; --p-color-info-90: #dcf2fe; /* ---- Error (Red) ---- */ --p-color-error-40: #661414; --p-color-error-60: #d43e43; --p-color-error-70: #fd6854; --p-color-error-80: #feb3a9; --p-color-error-90: #ffe9e4; /* ---- Warning (Orange) ---- */ --p-color-warning-40: #482e09; --p-color-warning-60: #b35900; --p-color-warning-70: #d38800; --p-color-warning-80: #fed353; --p-color-warning-90: #fff7b2; /* ---- Success (Green) ---- */ --p-color-success-40: #143727; --p-color-success-60: #2e863e; --p-color-success-70: #3bad50; --p-color-success-80: #9fe3a7; --p-color-success-90: #cef7da; } /* ---- Slate scheme (trial) ---- Alternative neutral ramp: hue ~222, roughly half the saturation of the forest ramp, lightness matched step for step. Opt-in via data-scheme="slate" on (kn-scheme cookie, @kanowah/ui theme.js). Forest stays the default. Both themes follow automatically, because the semantic tokens only reference these primitives. */ [data-scheme="slate"] { --p-color-neutral-5: #121419; --p-color-neutral-10: #1c1f27; --p-color-neutral-20: #232732; --p-color-neutral-30: #373c49; --p-color-neutral-40: #5a606e; --p-color-neutral-60: #9a9ea8; --p-color-neutral-70: #c7cad0; --p-color-neutral-80: #e3e5e9; --p-color-neutral-90: #f7f8fa; --p-color-neutral-100: #fff; --p-color-frosty-light: #f4f5f780; } /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE TYPOGRAPHY Font families, weights, sizes, line-heights, letter-spacing. Raw values only. =========================================== */ /* ---- @font-face ---- */ /* Kanowah Mono — variable, single file covering weights 200–900. Self-hosted via tools/type/serve (see fonts.json). Replaced Logic Mono as the mono face. The FILE is metric-normalized (unitsPerEm rescale ×1.2, tools/type/fix `rescale`): advance 0.600em / x-height 0.549em match the system mono fallback (Menlo 0.602 / 0.547), so custom and fallback render at the same optical size in EVERY medium — including email, which cannot use CSS metric overrides. CSS stays transform-free: never add size-adjust (or ascent/descent overrides) to any face; normalization lives in the font file only (Rick, 2026-07-19). It is Inconsolata (OFL 1.1, no Reserved Font Name) with the family renamed at the FILE level via tools/type/fix `rename` — name IDs 1/3/4/6/16, with copyright, designer and license records kept intact and the derivation stated in name ID 10. The rename is the point: the normalized file used to report "Inconsolata", the same name Figma bundles and serves to every user, so a designer picking it from the font menu silently got Google's metrics instead of ours. Nothing warns you — the names matched. Never let this file's family name collide with an upstream one. Two earlier masters are retained beside it and must stay: inconsolata-variable.woff2 (un-normalized) and inconsolata-variable-normalized.woff2 (normalized, old name). Published docs pin a hash-versioned CSS copy that still references them. */ @font-face { font-family: "Kanowah Mono"; src: url("https://fonts.kanowah.com/files/kanowah-mono-variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } /* Kanowah Serif — variable, weights 200–900 in one upright + one italic file. It REPLACED Freight as the serif face (Rick, 2026-07-27). Freight had to go: its EULA (name ID 13, Phil's Fonts/GarageFonts) forbids modification outright and its 5-CPU desktop license embeds "for viewing and printing purposes only", which never covered serving woff2s off fonts.kanowah.com. Nothing here may point at a FreightTextPro* URL again. It is Source Serif 4 (OFL 1.1) with the family renamed at the FILE level via tools/type/fix `rename`. The rename is permitted because Source Serif's Reserved Font Name is "Source" alone — "Kanowah Serif" doesn't use it — and Adobe's copyright, the designer record and the license (name IDs 0/9/13/14) are preserved, with the derivation stated in name ID 10. Same discipline as Kanowah Mono above: never let this family name collide with an upstream one. The FILE is metric-normalized to Freight (unitsPerEm rescale 1000 -> 1055): x-height 0.450em and cap 0.635em land on Freight Light's 0.443 / 0.625, so the heading ramp did NOT have to be retuned on the swap and old and new docs sit at the same optical size. CSS stays transform-free — no size-adjust, ever. Legacy Freight URLs still 200 because published docs bake their own @font-face pointing straight at them and cannot be edited; those paths now serve THESE bytes (tools/type/serve/fonts.json, "Freight" entry). Nothing here relies on that — it exists only so frozen docs don't drop to system serif. */ @font-face { font-family: "Kanowah Serif"; src: url("https://fonts.kanowah.com/files/kanowah-serif-variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Kanowah Serif"; src: url("https://fonts.kanowah.com/files/kanowah-serif-italic-variable.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; } /* ---- Token Variables ---- */ :root { /* ---- Font Families ---- */ --p-font-family-mono: "Kanowah Mono", monospace; --p-font-family-serif: "Kanowah Serif", "Palatino Linotype", serif; /* ---- Font Weights ---- */ --p-font-weight-light: 300; --p-font-weight-book: 400; --p-font-weight-medium: 500; --p-font-weight-bold: 800; /* ---- Abstract Font Size Scale ---- Used as building blocks. Heading-specific sizes below. Fluid steps land on a whole pixel at 320px and at 1440px; the comments are the real numbers — verify with tokens/evaluate.js. */ --p-font-size-xs: 0.75rem; /* 12px */ --p-font-size-sm: 0.875rem; /* 14px */ --p-font-size-md: 1rem; /* 16px */ --p-font-size-lg: clamp(1.125rem, 1.089rem + 0.18vw, 1.25rem); /* 18px → 20px */ --p-font-size-xl: clamp(1.25rem, 1.178rem + 0.36vw, 1.5rem); /* 20px → 24px */ --p-font-size-2xl: clamp(1.5rem, 1.3571rem + 0.714vw, 2rem); /* 24px → 32px */ /* ---- Heading / Display Font Sizes ---- Geometric ramp: ratio ≈ 1.125 at 320px, ≈ 1.26 at 1440px. */ --p-font-size-display: clamp(2.875rem, 2.268rem + 3.036vw, 5rem); /* 46px → 80px */ --p-font-size-h1: clamp(1.8125rem, 1.1875rem + 3.125vw, 4rem); /* 29px → 64px */ --p-font-size-h2: clamp(1.625rem, 1.196rem + 2.143vw, 3.125rem); /* 26px → 50px */ --p-font-size-h3: clamp(1.4375rem, 1.134rem + 1.518vw, 2.5rem); /* 23px → 40px */ --p-font-size-h4: clamp(1.25rem, 1.036rem + 1.071vw, 2rem); /* 20px → 32px */ --p-font-size-h5: clamp(1.125rem, 1rem + 0.625vw, 1.5625rem);/* 18px → 25px */ --p-font-size-h6: clamp(1rem, 0.928rem + 0.36vw, 1.25rem); /* 16px → 20px */ /* ---- Text Sizes (body variants — FLUID) ---- clamp()+vw: scale with the viewport. For marketing sites/long-form reading, where type should breathe as the window grows. NOT for app chrome. */ --p-font-size-text-lg: clamp(0.875rem, 0.75rem + 0.3vw, 1rem); /* 14px → 16px */ --p-font-size-text-md: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); /* 12px → 14px */ --p-font-size-text-sm: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem); /* 11px → 12px */ /* ---- UI Sizes (app chrome — FIXED) ---- Non-fluid. Dense app interfaces want predictable sizes, not viewport scaling. Anchored at 14px (--ui-md), the everyday app body/line-item size. */ --p-font-size-ui-xs: 0.625rem; /* 10px — micro labels, badges, captions */ --p-font-size-ui-sm: 0.6875rem; /* 11px — secondary/meta text */ --p-font-size-ui-md: 0.75rem; /* 12px — default app body & line items */ --p-font-size-ui-lg: 0.875rem; /* 14px — emphasis, readable headers */ --p-font-size-ui-xl: 1.25rem; /* 20px — panel & detail titles (serif; not part of the mono step-down) */ /* ---- Line Heights ---- */ --p-line-height-xs: 1; --p-line-height-sm: 1.15; --p-line-height-md: 1.25; --p-line-height-lg: 1.5; --p-line-height-xl: 1.75; /* ---- Letter Spacing ---- */ --p-letter-spacing-none: 0em; --p-letter-spacing-tight: -0.05em; --p-letter-spacing-loose: 0.05em; } /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE SPACING Dual-ratio geometric scale. Desktop ratio ≈ 1.45, mobile ratio ≈ 1.25. Larger steps compress more on narrow viewports (320–1440px). Every clamp lands on a WHOLE PIXEL at both ends of that range: the min/max are exact rem-of-16 values and the slope term is solved to hit them at 320px and 1440px. The comments are the real numbers, not the intent — verify with tokens/evaluate.js (evaluateAt(value, 320) / evaluateAt(value, 1440)). =========================================== */ :root { /* ---- Spacing Scale ---- */ --p-space-0: 0; --p-space-1: 0.25rem; /* 4px fixed */ --p-space-2: 0.375rem; /* 6px fixed */ --p-space-3: clamp(0.375rem, 0.339rem + 0.18vw, 0.5rem); /* 6px → 8px */ --p-space-4: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem); /* 8px → 12px */ --p-space-5: clamp(0.625rem, 0.4821rem + 0.714vw, 1.125rem); /* 10px → 18px */ --p-space-6: clamp(0.75rem, 0.5rem + 1.25vw, 1.625rem); /* 12px → 26px */ --p-space-7: clamp(0.9375rem, 0.545rem + 1.964vw, 2.3125rem); /* 15px → 37px */ --p-space-8: clamp(1.1875rem, 0.56rem + 3.13vw, 3.375rem); /* 19px → 54px */ --p-space-9: clamp(1.5rem, 0.536rem + 4.821vw, 4.875rem); /* 24px → 78px */ --p-space-10: clamp(1.875rem, 0.393rem + 7.411vw, 7.0625rem); /* 30px → 113px */ /* ---- Grid Gaps ---- */ --p-grid-gap-sm: 0.75rem; /* 12px fixed */ --p-grid-gap-main: clamp(0.75rem, 0.3036rem + 2.232vw, 2.3125rem); /* 12px → 37px */ } /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE SIZING Fixed and fluid component sizes. Steps 0–9 are fixed. Steps 10–32 are fluid across 320–1440px and land on a WHOLE PIXEL at both ends: the min/max are exact rem-of-16 values and the slope term is solved to hit them at 320px and 1440px. The comments are the real numbers — verify with tokens/evaluate.js. =========================================== */ :root { --p-size-0: 0rem; /* 0px */ --p-size-1: 0.125rem; /* 2px */ --p-size-2: 0.25rem; /* 4px */ --p-size-3: 0.5rem; /* 8px */ --p-size-4: 0.625rem; /* 10px */ --p-size-5: 0.75rem; /* 12px */ --p-size-6: 0.875rem; /* 14px */ --p-size-7: 1rem; /* 16px */ --p-size-8: 1.25rem; /* 20px */ --p-size-9: 1.5rem; /* 24px */ --p-size-10: clamp(1.75rem, 1.678rem + 0.36vw, 2rem); /* 28px → 32px */ --p-size-11: clamp(2rem, 1.8571rem + 0.714vw, 2.5rem); /* 32px → 40px */ --p-size-12: clamp(2.25rem, 2.036rem + 1.071vw, 3rem); /* 36px → 48px */ --p-size-13: clamp(2.375rem, 2.053rem + 1.61vw, 3.5rem); /* 38px → 56px */ --p-size-14: clamp(2.5rem, 2.071rem + 2.143vw, 4rem); /* 40px → 64px */ --p-size-15: clamp(2.75rem, 2.25rem + 2.5vw, 4.5rem); /* 44px → 72px */ --p-size-16: clamp(3rem, 2.428rem + 2.86vw, 5rem); /* 48px → 80px */ --p-size-17: clamp(3.25rem, 2.6071rem + 3.214vw, 5.5rem); /* 52px → 88px */ --p-size-18: clamp(3.5rem, 2.786rem + 3.571vw, 6rem); /* 56px → 96px */ --p-size-19: clamp(3.75rem, 2.964rem + 3.93vw, 6.5rem); /* 60px → 104px */ --p-size-20: clamp(4rem, 3.142rem + 4.29vw, 7rem); /* 64px → 112px */ --p-size-21: clamp(4.25rem, 3.321rem + 4.643vw, 7.5rem); /* 68px → 120px */ --p-size-22: clamp(4.5rem, 3.5rem + 5vw, 8rem); /* 72px → 128px */ --p-size-23: clamp(4.75rem, 3.678rem + 5.36vw, 8.5rem); /* 76px → 136px */ --p-size-24: clamp(5rem, 3.8571rem + 5.714vw, 9rem); /* 80px → 144px */ --p-size-25: clamp(5.25rem, 4.036rem + 6.071vw, 9.5rem); /* 84px → 152px */ --p-size-26: clamp(5.5rem, 4.214rem + 6.43vw, 10rem); /* 88px → 160px */ --p-size-27: clamp(5.75rem, 4.25rem + 7.5vw, 11rem); /* 92px → 176px */ --p-size-28: clamp(6rem, 4.286rem + 8.571vw, 12rem); /* 96px → 192px */ --p-size-29: clamp(6.5rem, 4.642rem + 9.29vw, 13rem); /* 104px → 208px */ --p-size-30: clamp(7rem, 5rem + 10vw, 14rem); /* 112px → 224px */ --p-size-31: clamp(7.5rem, 5.3571rem + 10.714vw, 15rem); /* 120px → 240px */ --p-size-32: clamp(8rem, 5.714rem + 11.43vw, 16rem); /* 128px → 256px */ } /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE BORDERS Border widths and radii. =========================================== */ :root { /* ---- Border Width ---- */ --p-border-width: 0.0625rem; /* ---- SVG Stroke Width ---- */ --p-svg-stroke-width: 0.0625em; /* ---- Border Radius ---- -adaptive tracks the viewport up to a 12px cap. The 1.25vw slope puts it on 4px at 320px (1vw landed on 3.2px) and hits the cap at 960px. */ --p-radius-xs: 0.375rem; /* 6px */ --p-radius-sm: 0.5rem; /* 8px */ --p-radius-md: 1rem; /* 16px */ --p-radius-lg: 1.5rem; /* 24px — marketing-scale cards */ --p-radius-pill: 100vw; --p-radius-adaptive: min(0.75rem, 1.25vw); /* 4px → 12px */ } /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE LAYOUT Max widths, grid system, page gutter. =========================================== */ :root { /* ---- Max Widths ---- */ --p-max-width-narrow: 48rem; /* 768px */ --p-max-width-medium: 64rem; /* 1024px */ --p-max-width-main: 90rem; /* 1440px */ /* ---- Page Gutter (horizontal padding) ---- */ --p-page-gutter: clamp(1rem, 0.428rem + 2.86vw, 3rem); /* 16px → 48px */ /* ---- Grid System ---- */ --p-column-count: 12; --p-grid-1: repeat(1, minmax(0, 1fr)); --p-grid-2: repeat(2, minmax(0, 1fr)); --p-grid-3: repeat(3, minmax(0, 1fr)); --p-grid-4: repeat(4, minmax(0, 1fr)); --p-grid-5: repeat(5, minmax(0, 1fr)); --p-grid-6: repeat(6, minmax(0, 1fr)); --p-grid-7: repeat(7, minmax(0, 1fr)); --p-grid-8: repeat(8, minmax(0, 1fr)); --p-grid-9: repeat(9, minmax(0, 1fr)); --p-grid-10: repeat(10, minmax(0, 1fr)); --p-grid-11: repeat(11, minmax(0, 1fr)); --p-grid-12: repeat(12, minmax(0, 1fr)); /* ---- Grid Computed Values ---- */ --p-grid-main: repeat(var(--p-column-count), minmax(0, 1fr)); --p-grid-gap-total: calc(var(--p-grid-gap-main) * (var(--p-column-count) - 1)); --p-grid-width: calc(min(var(--p-max-width-main), 100vw) - (var(--p-page-gutter) * 2)); --p-column-width: calc((var(--p-grid-width) - var(--p-grid-gap-total)) / var(--p-column-count) + var(--p-grid-gap-main)); /* ---- Breakout Grid ---- */ --p-breakout-gutter: minmax(calc(var(--p-page-gutter) - var(--p-grid-gap-main)), 1fr); --p-breakout-remaining: calc(var(--p-max-width-main) - (var(--p-page-gutter) * 2)); --p-breakout-start: [full-start] var(--p-breakout-gutter) [content-start]; --p-breakout-end: [content-end] var(--p-breakout-gutter) [full-end]; --p-grid-breakout: var(--p-breakout-start) repeat(var(--p-column-count), minmax(0, calc((var(--p-breakout-remaining) - var(--p-grid-gap-total)) / var(--p-column-count)))) var(--p-breakout-end); --p-grid-breakout-single: var(--p-breakout-start) minmax(0, var(--p-breakout-remaining)) var(--p-breakout-end); } /* =========================================== KANOWAH DESIGN TOKENS — PRIMITIVE UI / APP CHROME Fixed, NON-FLUID raw values for dense app interfaces. The --p-space-* / --p-size-* ramps above are mostly fluid (clamp + vw) so marketing sites breathe as the viewport grows. App chrome wants the opposite: predictable, tight, fixed spacing that does NOT scale with the window. This file is that parallel ramp — the spacing analog of the fixed --p-font-size-ui-* scale. Semantics map these to named --space-ui-* / --size-* roles. =========================================== */ :root { /* ---- Fixed UI spacing ramp (app chrome density) ---- */ --p-space-ui-0: 0; --p-space-ui-1: 0.125rem; /* 2px — hairline marker/icon gaps */ --p-space-ui-2: 0.25rem; /* 4px — list-row gap */ --p-space-ui-3: 0.375rem; /* 6px — tight item padding */ --p-space-ui-4: 0.5rem; /* 8px — block vertical padding */ --p-space-ui-5: 0.75rem; /* 12px — block inline padding */ --p-space-ui-6: 1rem; /* 16px — section padding */ --p-space-ui-7: 1.5rem; /* 24px — generous block padding */ --p-space-ui-8: 2rem; /* 32px — pane padding */ /* ---- Fixed avatar sizes (square identity chips) ---- */ --p-size-avatar-sm: 1.75rem; /* 28px — inline / list rows */ --p-size-avatar-md: 2.25rem; /* 36px — default */ --p-size-avatar-lg: 2.5rem; /* 40px — headers / rails */ --p-size-avatar-xl: 4rem; /* 64px — detail-page identity */ /* ---- Fixed control heights — shared by EVERY interactive control (buttons, inputs, selects, search, icon buttons) so a row of mixed controls lines up. The single ramp the whole platform sizes against. ---- */ --p-size-control-sm: 2rem; /* 32px */ --p-size-control-md: 2.75rem; /* 44px */ --p-size-control-lg: 3.25rem; /* 52px */ } /* =========================================== KANOWAH DESIGN TOKENS — SEMANTICS Layer 2: Meaningful names referencing primitives. These swap per theme (light/dark). =========================================== */ /* =========================================== KANOWAH SEMANTIC TOKENS — SURFACE Background and overlay colors. =========================================== */ /* :root = light mode. The 2nd selector re-lights an "invert" island nested in dark, so it is identical to light — never a third, drifted look. See _theme-dark.css for the full two-mode model. */ :root, [data-theme="dark"] [data-theme="invert"] { --color-bg: var(--p-color-neutral-90); --color-bg-alt: var(--p-color-neutral-100); --color-bg-inverse: var(--p-color-neutral-20); --color-bg-frosted: var(--p-color-frosty-light); --color-bg-transparent: var(--p-color-transparent); --color-overlay: var(--p-color-neutral-10); /* ---- Elevated surfaces (raised panels, inputs, hover) ---- */ --color-bg-elevated: var(--p-color-neutral-100); --color-bg-hover: var(--p-color-neutral-80); /* ---- App shell (KnAppShell): the canvas is the ground the chrome sits on, the card is the content surface floating on it. Two roles rather than one --color-bg, because the shell needs them to differ. ---- */ --color-bg-canvas: var(--p-color-neutral-90); --color-bg-card: var(--p-color-neutral-100); /* ---- Rail (always-dark chrome; surface varies by theme, fg stays light) ---- */ --color-bg-rail: var(--p-color-neutral-20); --color-rail-fg: var(--p-color-neutral-90); /* constant — never theme-flipped */ /* ---- Secondary Surface (filled controls, subtle panels) ---- */ --color-surface-secondary: var(--p-color-neutral-80); --color-surface-secondary-hover: var(--p-color-neutral-70); } /* =========================================== KANOWAH SEMANTIC TOKENS — TEXT Text color roles. =========================================== */ /* :root = light mode; 2nd selector re-lights an "invert" island nested in dark (identical to light — no drift). See _theme-dark.css. */ :root, [data-theme="dark"] [data-theme="invert"] { --color-text: var(--p-color-neutral-20); --color-text-secondary: var(--p-color-neutral-30); --color-text-accent: var(--p-color-neutral-40); --color-text-muted: var(--p-color-neutral-40); --color-text-inverse: var(--p-color-neutral-100); --color-text-brand: var(--p-color-brand-90); --color-link: var(--color-text-accent); } /* =========================================== KANOWAH SEMANTIC TOKENS — INTERACTIVE Button, form, and focus colors. =========================================== */ /* :root = light mode; 2nd selector re-lights an "invert" island nested in dark (identical to light — no drift). See _theme-dark.css. */ :root, [data-theme="dark"] [data-theme="invert"] { /* ---- Button Primary ---- */ --color-btn-bg: var(--p-color-neutral-20); --color-btn-text: var(--p-color-brand-90); --color-btn-border: var(--p-color-neutral-80); --color-btn-bg-hover: var(--p-color-neutral-40); --color-btn-text-hover: var(--p-color-neutral-90); --color-btn-border-hover: var(--p-color-neutral-40); /* ---- Button Secondary ---- */ --color-btn-secondary-bg: var(--p-color-transparent); --color-btn-secondary-text: var(--p-color-neutral-20); --color-btn-secondary-border: var(--p-color-neutral-70); --color-btn-secondary-bg-hover: var(--p-color-brand-90); --color-btn-secondary-text-hover: var(--p-color-neutral-20); --color-btn-secondary-border-hover: var(--p-color-neutral-60); /* ---- Button Danger (solid red — destructive actions) ---- Theme-invariant: a saturated danger red reads identically in light and dark, so this does NOT flip in _theme-dark.css. error-60 (#d43e43) with white text = 4.6:1 (WCAG AA). Do not point this at --color-error-text, which lifts to the pale error-80 in dark mode (white text → ~1.7:1). */ --color-btn-danger-bg: var(--p-color-error-60); --color-btn-danger-text: var(--p-color-neutral-100); --color-btn-danger-border: var(--p-color-error-60); /* ---- Form ---- */ --color-form-text: var(--p-color-neutral-20); /* ---- Brand (theme-INVARIANT lime, + translucent dim/glow) ---- Deliberately the same in both themes, so it only belongs on chrome that is dark in both themes (the rail). It has ~1.1:1 against a light surface, so on any theme-variable surface use --color-selected below, and for text use --color-link / --color-text-accent. Named `brand`, not `accent`, because `accent` read like a general-purpose role and kept getting reached for. */ --color-brand: var(--p-color-brand-90); --color-brand-dim: color-mix(in srgb, var(--p-color-brand-90) 14%, transparent); --color-brand-glow: color-mix(in srgb, var(--p-color-brand-90) 30%, transparent); /* ---- Selected / active accent on theme-variable backgrounds ---- Brand reads on dark chrome but has almost no contrast on a light surface, so in light mode these fall back to neutrals. Use for selected states that sit on the content area (active tab underline, selected pills). The always-dark rail uses --color-brand directly. */ --color-selected: var(--color-text); /* strong neutral line/text */ --color-selected-dim: var(--p-color-neutral-80); /* soft neutral pill bg */ /* ---- Focus Ring ---- */ --color-focus-ring: var(--p-color-brand-90); /* ---- Image Filter (duotone) ---- */ --image-filter-saturate: 370%; --image-filter-brightness: 46%; } /* =========================================== KANOWAH SEMANTIC TOKENS — FEEDBACK Status colors for success, error, warning, info. =========================================== */ /* :root = light mode; 2nd selector re-lights an "invert" island nested in dark (identical to light — no drift). See _theme-dark.css. */ :root, [data-theme="dark"] [data-theme="invert"] { /* ---- Success ---- */ --color-success-text: var(--p-color-success-60); --color-success-bg: var(--p-color-success-90); --color-success-icon: var(--p-color-success-70); --color-success-border: var(--p-color-success-70); /* ---- Error ---- */ --color-error-text: var(--p-color-error-60); --color-error-bg: var(--p-color-error-90); --color-error-icon: var(--p-color-error-70); --color-error-border: var(--p-color-error-70); /* ---- Warning ---- */ --color-warning-text: var(--p-color-warning-60); --color-warning-bg: var(--p-color-warning-90); --color-warning-icon: var(--p-color-warning-70); --color-warning-border: var(--p-color-warning-70); /* ---- Info ---- */ --color-info-text: var(--p-color-info-60); --color-info-bg: var(--p-color-info-90); --color-info-icon: var(--p-color-info-70); --color-info-border: var(--p-color-info-70); /* ---- Dim tints (subtle status fills for badges, ghost buttons) ---- */ --color-success-dim: color-mix(in srgb, var(--p-color-success-60) 16%, transparent); --color-error-dim: color-mix(in srgb, var(--p-color-error-60) 16%, transparent); --color-warning-dim: color-mix(in srgb, var(--p-color-warning-60) 16%, transparent); --color-info-dim: color-mix(in srgb, var(--p-color-info-60) 16%, transparent); } /* =========================================== KANOWAH SEMANTIC TOKENS — TYPOGRAPHY Composite type role assignments. =========================================== */ :root { /* ---- Body ---- */ --font-body-family: var(--p-font-family-mono); --font-body-size: var(--p-font-size-text-md); --font-body-weight: var(--p-font-weight-light); --font-body-line-height: var(--p-line-height-lg); --font-body-letter-spacing: var(--p-letter-spacing-none); /* ---- Body Variants ---- */ --font-body-lg-size: var(--p-font-size-text-lg); --font-body-sm-size: var(--p-font-size-text-sm); --font-body-xs-size: var(--p-font-size-xs); /* ---- UI / App roles (FIXED, non-fluid) ---- For app interfaces (open-tab, record, id) where type should not scale with the viewport. --font-ui-size is the everyday 12px app body & line-item size (stepped down 2026-07-19 after the mono file-normalization made glyphs match the system fallback, i.e. render ~20% larger at equal rem). Sites keep using the fluid --font-body-* roles above. */ --font-ui-size: var(--p-font-size-ui-md); /* 12px — default */ --font-ui-lg-size: var(--p-font-size-ui-lg); /* 14px */ --font-ui-xl-size: var(--p-font-size-ui-xl); /* 20px — panel/detail titles */ --font-ui-sm-size: var(--p-font-size-ui-sm); /* 11px */ --font-ui-xs-size: var(--p-font-size-ui-xs); /* 10px */ /* ---- Headings (shared) ---- */ --font-heading-family: var(--p-font-family-serif); --font-heading-weight: var(--p-font-weight-light); --font-heading-line-height: var(--p-line-height-sm); --font-heading-letter-spacing: var(--p-letter-spacing-none); /* ---- Per-Level Heading Sizes ---- */ --font-display-size: var(--p-font-size-display); --font-h1-size: var(--p-font-size-h1); --font-h2-size: var(--p-font-size-h2); --font-h3-size: var(--p-font-size-h3); --font-h4-size: var(--p-font-size-h4); /* ---- H5 / H6 (mono, uppercase) ---- */ --font-h5-family: var(--p-font-family-mono); --font-h5-size: var(--p-font-size-h5); --font-h5-weight: var(--p-font-weight-book); --font-h5-line-height: var(--p-line-height-md); --font-h5-transform: uppercase; --font-h6-family: var(--p-font-family-mono); --font-h6-size: var(--p-font-size-h6); --font-h6-weight: var(--p-font-weight-light); --font-h6-line-height: var(--p-line-height-md); --font-h6-transform: uppercase; /* ---- Accent (Freight italic, editorial) ---- The serif-italic treatment used for hero amounts, login titles, panel and board headings across apps. Family + style + weight are the shared, fixed part; size and color stay contextual (muted secondary by default, brand lime for money amounts). Applied via the .kn-accent-heading class. */ --font-accent-family: var(--p-font-family-serif); --font-accent-weight: var(--p-font-weight-light); --font-accent-style: italic; /* ---- Eyebrow ---- */ --font-eyebrow-family: var(--p-font-family-mono); --font-eyebrow-size: var(--p-font-size-text-lg); --font-eyebrow-weight: var(--p-font-weight-bold); --font-eyebrow-line-height: var(--p-line-height-sm); /* ---- Button Text ---- */ --font-button-size: var(--p-font-size-text-md); --font-button-letter-spacing: var(--p-letter-spacing-loose); --font-button-transform: uppercase; } /* ---- UI scale: medium step (user preference) ---- data-fontsize="md" on (kn-fontsize cookie, set by @kanowah/ui theme.js) bumps the fixed app scale one step for readability: 10/11/12/14 → 11/12/14/16. Panel titles (--font-ui-xl-size) stay 20px. Values are the next steps of the same fixed px ramp, inlined because the primitive layer keeps one value per role. */ [data-fontsize="md"] { --font-ui-xs-size: 0.6875rem; /* 11px */ --font-ui-sm-size: 0.75rem; /* 12px */ --font-ui-size: 0.875rem; /* 14px */ --font-ui-lg-size: 1rem; /* 16px */ } /* =========================================== KANOWAH SEMANTIC TOKENS — SPACING Directional spacing by use-case. Primitives: --p-space-0 … --p-space-10 =========================================== */ :root { /* ---- Section vertical padding (large vertical rhythm) ---- */ --space-section-sm: var(--p-space-7); /* 15px → 37px */ --space-section-md: var(--p-space-8); /* 19px → 54px */ --space-section-lg: var(--p-space-9); /* 24px → 78px */ --space-section-xl: var(--p-space-10); /* 30px → 113px */ /* ---- Vertical padding (component-level) ---- */ --space-pad-y-xs: var(--p-space-4); /* 8px → 12px */ --space-pad-y-sm: var(--p-space-5); /* 10px → 18px */ --space-pad-y-md: var(--p-space-7); /* 15px → 37px */ --space-pad-y-lg: var(--p-space-8); /* 19px → 54px */ /* ---- Horizontal padding ---- */ --space-pad-x-sm: var(--p-space-5); /* 10px → 18px */ --space-pad-x-md: var(--p-space-7); /* 15px → 37px */ --space-pad-x-lg: var(--p-space-8); /* 19px → 54px */ /* ---- Stack spacing (vertical gaps between sibling elements) ---- */ --space-stack-xs: var(--p-space-2); /* 6px fixed */ --space-stack-sm: var(--p-space-4); /* 8px → 12px */ --space-stack-md: var(--p-space-5); /* 10px → 18px */ --space-stack-lg: var(--p-space-7); /* 15px → 37px */ --space-stack-xl: var(--p-space-8); /* 19px → 54px */ /* ---- Gap spacing (flexbox / grid gaps) ---- */ --space-gap-xs: var(--p-space-3); /* 6px → 8px */ --space-gap-sm: var(--p-space-4); /* 8px → 12px */ --space-gap-md: var(--p-space-6); /* 12px → 26px */ --space-gap-lg: var(--p-space-7); /* 15px → 37px */ --space-gap-xl: var(--p-space-8); /* 19px → 54px */ /* ---- Inline spacing (horizontal between inline elements) ---- */ --space-inline-xs: var(--p-space-1); /* 4px fixed */ --space-inline-sm: var(--p-space-2); /* 6px fixed */ --space-inline-md: var(--p-space-4); /* 8px → 12px */ /* ---- Page gutter ---- */ --space-gutter: var(--p-page-gutter); /* 16px → 48px */ /* ---- Button padding (em-based, scales with font size) ---- */ --space-btn-v: 1em; --space-btn-h: 2em; } /* =========================================== KANOWAH SEMANTIC TOKENS — APP / UI CHROME The fixed, dense counterpart to the fluid site roles. Marketing sites use the fluid roles: --space-* (grows with the viewport) and --font-body-* (clamped). App interfaces (mail, messaging, open-tab, record, id, …) are dense and should NOT scale with the window — they use the FIXED roles below plus the existing --font-ui-* sizes. Tune app density here, once, instead of inventing a local --cx/--cy scale per app. =========================================== */ :root { /* ---- Fixed UI spacing (use in apps wherever sites would use --space-*) ---- */ --space-ui-2xs: var(--p-space-ui-1); /* 2px — marker/icon gaps */ --space-ui-xs: var(--p-space-ui-2); /* 4px — list-row gap */ --space-ui-sm: var(--p-space-ui-3); /* 6px — tight item padding */ --space-ui-md: var(--p-space-ui-4); /* 8px — block vertical padding */ --space-ui-lg: var(--p-space-ui-5); /* 12px — block inline padding */ --space-ui-xl: var(--p-space-ui-6); /* 16px — section padding */ --space-ui-2xl: var(--p-space-ui-7); /* 24px — generous block padding */ --space-ui-3xl: var(--p-space-ui-8); /* 32px — pane padding */ /* ---- Avatar sizing (square identity chips, --radius-sm corners) ---- */ --size-avatar-sm: var(--p-size-avatar-sm); /* 28px */ --size-avatar-md: var(--p-size-avatar-md); /* 36px */ --size-avatar-lg: var(--p-size-avatar-lg); /* 40px */ --size-avatar-xl: var(--p-size-avatar-xl); /* 64px */ /* ---- Control sizing — ONE height per size for every interactive control (button, input, select, search, icon button), plus the matching horizontal padding + font. Any two same-size controls share a height and line up; change a step here and all controls of that size move together. A form selects a step once and every control inside follows it — see the FORM SIZING SYSTEM in @kanowah/ui/controls.css, which maps these three steps onto the cascading --control-h / --control-px / --control-fs trio. ---- */ --size-control-sm: var(--p-size-control-sm); /* 32px — dense toolbars / top bar */ --size-control-md: var(--p-size-control-md); /* 44px — app default, min accessible tap target */ --size-control-lg: var(--p-size-control-lg); /* 52px — generous / focal forms */ --control-pad-sm: var(--space-ui-lg); /* 12px — horizontal padding */ --control-pad-md: var(--space-ui-xl); /* 16px */ --control-pad-lg: var(--space-ui-2xl); /* 24px */ --control-font-sm: var(--font-ui-sm-size); /* 11px */ --control-font-md: var(--font-ui-size); /* 12px */ --control-font-lg: var(--font-ui-lg-size); /* 14px */ /* One corner radius for every control (button, input, select, search, icon button) so they all agree — tune control roundness here in one place. */ --radius-control: var(--radius-input); /* 8px */ } /* =========================================== KANOWAH SEMANTIC TOKENS — BORDERS Border colors and radius roles. =========================================== */ /* :root = light mode; 2nd selector re-lights an "invert" island nested in dark (identical to light — no drift). See _theme-dark.css. (Radius roles below are mode-independent; re-declaring them on the island is harmless.) */ :root, [data-theme="dark"] [data-theme="invert"] { /* ---- Border Color ---- */ --color-border: var(--p-color-neutral-60); --color-border-subtle: var(--p-color-neutral-80); /* ---- Radius Roles ---- */ --radius-sm: var(--p-radius-xs); /* 6px — tight tool controls */ --radius-card: var(--p-radius-md); --radius-card-lg: var(--p-radius-lg); /* 24px — marketing cards, roomier than app chrome */ --radius-input: var(--p-radius-sm); --radius-pill: var(--p-radius-pill); --radius-adaptive: var(--p-radius-adaptive); } /* =========================================== KANOWAH SEMANTIC TOKENS — DARK MODE The single dark palette. There are only two modes: light (:root) and dark. Applies to: [data-theme="dark"] — dark mode (set on by @kanowah/ui theme.js) [data-theme="invert"] — a DARK island inside a light page "invert" is not a third palette — it means "render this island in the opposite mode." A dark island in a light page = exactly dark (this block). A LIGHT island inside dark (data-theme="invert" nested under data-theme="dark") is re-lit to exactly the light values by the compound selector in the role files (_surface/_text/_interactive/_feedback/_borders). So an inverted island always equals the opposite mode — never a drifted look. Values are the dense app-shell palette (apps are the dominant dark surface). This file merges the former _theme-dark.css + _theme-tools-dark.css, which had drifted into two different darks (neutral-20 vs neutral-10 ground). Tokens not listed here (brand, focus-ring, text-brand, feedback dims, icons) do not flip and inherit their :root value. =========================================== */ [data-theme="dark"], [data-theme="invert"] { /* ---- Surface ---- The body (--color-bg) is the deepest tone. Card surfaces paint --color-bg as well — the border draws the card (see the app card convention) — while --color-bg-alt keeps its own step for chips, wells and hover fills, so bg and bg-alt never mean the same thing. */ --color-bg: var(--p-color-neutral-5); --color-bg-alt: var(--p-color-neutral-10); --color-bg-inverse: var(--p-color-neutral-90); --color-bg-elevated: var(--p-color-neutral-20); --color-bg-hover: var(--p-color-neutral-30); --color-bg-rail: var(--p-color-neutral-5); /* App shell, dark: the BODY is the deepest surface and the chrome canvas (top bar, dock, gutter) sits a step above it — the reverse of light mode, where the body card is the lightest surface on a grey canvas. In both modes the content cards (--color-bg-alt) read one step off the body. */ --color-bg-canvas: var(--p-color-neutral-10); --color-bg-card: var(--p-color-neutral-5); --color-overlay: var(--p-color-neutral-5); --color-surface-secondary: var(--p-color-neutral-20); --color-surface-secondary-hover: var(--p-color-neutral-30); /* ---- Text ---- */ --color-text: var(--p-color-neutral-90); --color-text-secondary: var(--p-color-neutral-70); --color-text-accent: var(--p-color-brand-90); --color-text-muted: var(--p-color-neutral-60); --color-text-inverse: var(--p-color-neutral-20); --color-link: var(--p-color-brand-90); /* ---- Border ---- */ --color-border: var(--p-color-neutral-30); --color-border-subtle: var(--p-color-neutral-20); /* ---- Brand (only the dim tint flips; brand/glow are theme-invariant) ---- */ --color-brand-dim: color-mix(in srgb, var(--p-color-brand-90) 15%, transparent); /* ---- Selected / active accent (brand reads on the dark ground) ---- */ --color-selected: var(--p-color-brand-90); --color-selected-dim: color-mix(in srgb, var(--p-color-brand-90) 15%, transparent); /* ---- Button Primary (solid chartreuse) ---- */ --color-btn-bg: var(--p-color-brand-90); --color-btn-text: var(--p-color-neutral-20); --color-btn-border: var(--p-color-brand-90); --color-btn-bg-hover: var(--p-color-brand-95); --color-btn-text-hover: var(--p-color-neutral-20); --color-btn-border-hover: var(--p-color-brand-95); /* ---- Button Secondary (elevated) ---- */ --color-btn-secondary-bg: var(--p-color-neutral-20); --color-btn-secondary-text: var(--p-color-neutral-90); --color-btn-secondary-border: var(--p-color-neutral-30); --color-btn-secondary-bg-hover: var(--p-color-neutral-30); --color-btn-secondary-text-hover: var(--p-color-neutral-90); --color-btn-secondary-border-hover: var(--p-color-neutral-40); /* ---- Form (elevated inputs) ---- */ --color-form-text: var(--p-color-neutral-90); /* ---- Feedback (text lifts, bg deepens; icon, border + dim tints inherit :root — the -70 step is the graphic weight that reads on either ground) ---- */ --color-success-text: var(--p-color-success-80); --color-success-bg: var(--p-color-success-40); --color-error-text: var(--p-color-error-80); --color-error-bg: var(--p-color-error-40); --color-warning-text: var(--p-color-warning-80); --color-warning-bg: var(--p-color-warning-40); --color-info-text: var(--p-color-info-80); --color-info-bg: var(--p-color-info-40); /* ---- Image filter (duotone, flipped for the dark ground) ---- */ --image-filter-saturate: 60%; --image-filter-brightness: 154%; } /* =========================================== KANOWAH DESIGN SYSTEM — GLOBAL RESET The handful of rules every app was hand-rolling (or missing) on its own: box-sizing, margin/padding zeroing, themed body background/text, font smoothing, and scrollbar-gutter stability. Included automatically via `@kanowah/design-system/css` — apps should stop redeclaring these and keep only what's genuinely app-specific (full-bleed height/overflow, fixed vs. fluid font scale, etc.). =========================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Reserve scrollbar space permanently so 100vw — and every clamp()-based fluid token in primitives/_typography.css — never shifts depending on whether a scrollbar happens to be present. Without this, a tall page can render fluid type at one size before the scrollbar appears and a different size after, since every fluid token is vw-relative and they all shift together the instant it does. */ scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; } body { background: var(--color-bg); color: var(--color-text); /* Mono is the house body face — serif is opt-in (headings, .kn-accent-heading). It has to sit on , not on each app's root element: KnSlidePanel, KnModal, KnPicker, KnToastRegion and friends ``, so anything they render lands OUTSIDE .mail / .crm / … and would otherwise inherit the browser's default serif for every rule that doesn't name a family itself. */ font-family: var(--font-body-family); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Bare links must still look intentional. Component selectors can override this low-specificity fallback; visited links inherit it instead of leaking the browser's default blue/purple palette into branded surfaces. */ a { color: var(--color-link); }