/* ========================================================================== KeyCare Dental — Design System (assets/theme.css) Self-contained. No CDNs, no webfonts, no frameworks. CSP-safe. -------------------------------------------------------------------------- HOW TO USE Every token is prefixed --kc-. Every component class is prefixed .kc-. Light is the default; dark applies via prefers-color-scheme OR the explicit override / data-theme="light". ── TOKEN MAP ──────────────────────────────────────────────────────────── PALETTE (raw ramps — prefer the semantic tokens below in product code) --kc-navy-50 … --kc-navy-950 brand ink / chrome --kc-teal-50 … --kc-teal-900 brand accent --kc-slate-50 … --kc-slate-950 neutrals --kc-green-* --kc-amber-* --kc-red-* --kc-violet-* status hues SEMANTIC SURFACES + INK (theme-aware — use these) --kc-bg page background --kc-bg-sunken recessed areas (table headers, wells, code) --kc-surface card / panel background --kc-surface-raised popovers, modals, dropdowns --kc-surface-hover hover wash for rows / list items --kc-border default hairline --kc-border-strong emphasized divider, input border --kc-text primary text --kc-text-muted secondary text --kc-text-subtle tertiary / meta text --kc-text-inverse text on accent fills --kc-accent brand action color --kc-accent-hover / --kc-accent-active --kc-accent-soft tinted accent background --kc-accent-ink readable accent text on soft backgrounds --kc-focus focus ring color --kc-overlay modal scrim STATUS: --kc-success / --kc-warning / --kc-danger / --kc-info each with -soft (bg) and -ink (text) companions TYPE --kc-font-sans --kc-font-mono --kc-font-display --kc-text-2xs 11px | -xs 12 | -sm 13 | -base 15 | -md 16 | -lg 18 --kc-text-xl 21 | -2xl 25 | -3xl 31 | -4xl 39 | -5xl 49 | -6xl 61 --kc-weight-normal/medium/semibold/bold --kc-leading-none/tight/snug/normal/relaxed --kc-tracking-tighter/tight/normal/wide/wider SPACE (4px base) --kc-space-0 … --kc-space-32 (0,2,4,6,8,10,12,16,20, 24,28,32,40,48,56,64,80,96,128px) RADII --kc-radius-xs 4 | -sm 6 | -md 9 | -lg 12 | -xl 16 | -2xl 22 | -3xl 30 | -full 999px SHADOW --kc-shadow-xs/sm/md/lg/xl/2xl (layered) + --kc-shadow-inset --kc-ring (1px token border) --kc-glow-accent MOTION --kc-dur-fast 120ms | -base 200ms | -slow 320ms | -slower 520ms --kc-ease (standard) --kc-ease-out --kc-ease-spring LAYOUT --kc-container 1200px | --kc-container-wide 1400px --kc-sidebar-w 264px | --kc-topbar-h 60px Z --kc-z-base 1 | -sticky 100 | -dropdown 200 | -overlay 800 | -modal 900 | -toast 1000 ── COMPONENTS ─────────────────────────────────────────────────────────── .kc-btn (.kc-btn--primary .kc-btn--secondary .kc-btn--ghost .kc-btn--danger .kc-btn--sm .kc-btn--lg .kc-btn--icon .kc-btn--block) [disabled] and [data-loading] supported .kc-card (.kc-card__header .kc-card__title .kc-card__sub .kc-card__body .kc-card__footer .kc-card--flush .kc-card--interactive) .kc-stat (.kc-stat__label .kc-stat__value .kc-stat__meta .kc-stat__delta .is-up .is-down .kc-stat__icon) .kc-table-wrap > .kc-table (th td, .kc-table--zebra, .is-numeric, .kc-table td.kc-table__actions) .kc-badge (--success --warning --danger --info --neutral --accent .kc-badge--dot) .kc-field .kc-label .kc-input .kc-select .kc-textarea .kc-hint .kc-field--error .kc-checkbox .kc-radio .kc-switch .kc-input-group .kc-search .kc-nav .kc-nav__inner .kc-nav__brand .kc-nav__links .kc-nav__link .kc-sidebar .kc-sidebar__section .kc-sidebar__label .kc-sidebar__item (.is-active) .kc-sidebar__badge .kc-modal-root .kc-modal__scrim .kc-modal (.kc-modal__header .kc-modal__body .kc-modal__footer .kc-modal__close) .kc-toast-region .kc-toast (--success --danger --warning) .kc-skeleton (.kc-skeleton--text .kc-skeleton--title .kc-skeleton--circle .kc-skeleton--block) .kc-avatar .kc-avatar-stack .kc-progress .kc-tabs .kc-tab .kc-chip .kc-kbd .kc-divider .kc-tooltip Utilities: .kc-container .kc-stack-* .kc-row .kc-grid .kc-muted .kc-sr-only .kc-truncate .kc-reveal ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS -------------------------------------------------------------------------- */ :root { color-scheme: light dark; /* --- raw palette --- */ --kc-navy-50: #eef2f8; --kc-navy-100: #d8e0ee; --kc-navy-200: #b2c1da; --kc-navy-300: #8298bd; --kc-navy-400: #566f9c; --kc-navy-500: #38507c; --kc-navy-600: #283c62; --kc-navy-700: #1d2d4c; --kc-navy-800: #152139; --kc-navy-900: #0e1728; --kc-navy-950: #070d18; --kc-teal-50: #e6fbf7; --kc-teal-100: #c2f4ea; --kc-teal-200: #8ae8d8; --kc-teal-300: #4ed6c1; --kc-teal-400: #21bda9; --kc-teal-500: #0d9e8e; --kc-teal-600: #087f74; --kc-teal-700: #0a655e; --kc-teal-800: #0b514c; --kc-teal-900: #0a3f3c; --kc-slate-50: #f7f9fb; --kc-slate-100: #eef2f6; --kc-slate-200: #e0e6ee; --kc-slate-300: #cbd4e0; --kc-slate-400: #97a3b6; --kc-slate-500: #6b7889; --kc-slate-600: #4f5b6b; --kc-slate-700: #3a4553; --kc-slate-800: #262e3a; --kc-slate-900: #171d26; --kc-slate-950: #0d1117; --kc-green-100: #d6f5e3; --kc-green-500: #16a34a; --kc-green-700: #12703a; --kc-amber-100: #fdefcf; --kc-amber-500: #d68b0a; --kc-amber-700: #92600a; --kc-red-100: #fde3e3; --kc-red-500: #dc3d3d; --kc-red-700: #9d2626; --kc-violet-100:#eae4fd; --kc-violet-500:#7b5cf0; --kc-violet-700:#5237bd; /* --- semantic: light --- */ --kc-bg: #ffffff; --kc-bg-sunken: var(--kc-slate-50); --kc-surface: #ffffff; --kc-surface-raised: #ffffff; --kc-surface-hover: var(--kc-slate-50); --kc-border: #e6ebf1; --kc-border-strong: var(--kc-slate-300); --kc-text: var(--kc-navy-900); --kc-text-muted: var(--kc-slate-600); --kc-text-subtle: var(--kc-slate-500); --kc-text-inverse: #ffffff; --kc-accent: var(--kc-teal-600); --kc-accent-hover: var(--kc-teal-700); --kc-accent-active: var(--kc-teal-800); --kc-accent-soft: var(--kc-teal-50); --kc-accent-ink: var(--kc-teal-700); --kc-focus: var(--kc-teal-400); --kc-overlay: rgba(7, 13, 24, 0.55); --kc-success: var(--kc-green-500); --kc-success-soft: var(--kc-green-100); --kc-success-ink: var(--kc-green-700); --kc-warning: var(--kc-amber-500); --kc-warning-soft: var(--kc-amber-100); --kc-warning-ink: var(--kc-amber-700); --kc-danger: var(--kc-red-500); --kc-danger-soft: var(--kc-red-100); --kc-danger-ink: var(--kc-red-700); --kc-info: var(--kc-violet-500); --kc-info-soft: var(--kc-violet-100); --kc-info-ink: var(--kc-violet-700); --kc-shadow-color: 215 40% 12%; --kc-shadow-xs: 0 1px 1px hsl(var(--kc-shadow-color) / 0.05); --kc-shadow-sm: 0 1px 2px hsl(var(--kc-shadow-color) / 0.06), 0 1px 3px hsl(var(--kc-shadow-color) / 0.05); --kc-shadow-md: 0 1px 2px hsl(var(--kc-shadow-color) / 0.05), 0 4px 10px -2px hsl(var(--kc-shadow-color) / 0.08); --kc-shadow-lg: 0 1px 2px hsl(var(--kc-shadow-color) / 0.04), 0 8px 20px -4px hsl(var(--kc-shadow-color) / 0.10), 0 18px 36px -12px hsl(var(--kc-shadow-color) / 0.10); --kc-shadow-xl: 0 2px 4px hsl(var(--kc-shadow-color) / 0.04), 0 12px 28px -6px hsl(var(--kc-shadow-color) / 0.12), 0 34px 64px -18px hsl(var(--kc-shadow-color) / 0.16); --kc-shadow-2xl: 0 4px 8px hsl(var(--kc-shadow-color) / 0.05), 0 20px 44px -10px hsl(var(--kc-shadow-color) / 0.14), 0 56px 100px -24px hsl(var(--kc-shadow-color) / 0.22); --kc-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6); --kc-ring: 0 0 0 1px var(--kc-border); --kc-glow-accent: 0 0 0 4px rgba(13, 158, 142, 0.16); /* --- type --- */ --kc-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --kc-font-display: var(--kc-font-sans); --kc-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --kc-text-2xs: 0.6875rem; --kc-text-xs: 0.75rem; --kc-text-sm: 0.8125rem; --kc-text-base:0.9375rem; --kc-text-md: 1rem; --kc-text-lg: 1.125rem; --kc-text-xl: 1.3125rem; --kc-text-2xl: 1.5625rem; --kc-text-3xl: 1.9375rem; --kc-text-4xl: 2.4375rem; --kc-text-5xl: 3.0625rem; --kc-text-6xl: 3.8125rem; --kc-weight-normal: 400; --kc-weight-medium: 500; --kc-weight-semibold: 600; --kc-weight-bold: 700; --kc-leading-none: 1; --kc-leading-tight: 1.15; --kc-leading-snug: 1.3; --kc-leading-normal: 1.5; --kc-leading-relaxed: 1.65; --kc-tracking-tighter: -0.03em; --kc-tracking-tight: -0.015em; --kc-tracking-normal: 0; --kc-tracking-wide: 0.02em; --kc-tracking-wider: 0.08em; /* --- space --- */ --kc-space-0: 0; --kc-space-px: 1px; --kc-space-0-5: 2px; --kc-space-1: 4px; --kc-space-1-5: 6px; --kc-space-2: 8px; --kc-space-2-5: 10px; --kc-space-3: 12px; --kc-space-4: 16px; --kc-space-5: 20px; --kc-space-6: 24px; --kc-space-7: 28px; --kc-space-8: 32px; --kc-space-10: 40px; --kc-space-12: 48px; --kc-space-14: 56px; --kc-space-16: 64px; --kc-space-20: 80px; --kc-space-24: 96px; --kc-space-32: 128px; /* --- radii --- */ --kc-radius-xs: 4px; --kc-radius-sm: 6px; --kc-radius-md: 9px; --kc-radius-lg: 12px; --kc-radius-xl: 16px; --kc-radius-2xl: 22px; --kc-radius-3xl: 30px; --kc-radius-full: 999px; /* --- motion --- */ --kc-dur-fast: 120ms; --kc-dur-base: 200ms; --kc-dur-slow: 320ms; --kc-dur-slower: 520ms; --kc-ease: cubic-bezier(0.4, 0, 0.2, 1); --kc-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --kc-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); /* --- layout --- */ --kc-container: 1200px; --kc-container-wide: 1400px; --kc-sidebar-w: 264px; --kc-topbar-h: 60px; /* --- z --- */ --kc-z-base: 1; --kc-z-sticky: 100; --kc-z-dropdown: 200; --kc-z-overlay: 800; --kc-z-modal: 900; --kc-z-toast: 1000; } /* --- semantic: dark --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kc-bg: var(--kc-navy-950); --kc-bg-sunken: #050a13; --kc-surface: #0d1524; --kc-surface-raised: #131d30; --kc-surface-hover: #162135; --kc-border: #1e2b42; --kc-border-strong: #2c3c58; --kc-text: #e8eef7; --kc-text-muted: #9dabc2; --kc-text-subtle: #74829a; --kc-text-inverse: #04121a; --kc-accent: var(--kc-teal-300); --kc-accent-hover: var(--kc-teal-200); --kc-accent-active: var(--kc-teal-100); --kc-accent-soft: rgba(78, 214, 193, 0.12); --kc-accent-ink: var(--kc-teal-200); --kc-focus: var(--kc-teal-300); --kc-overlay: rgba(3, 6, 12, 0.72); --kc-success: #3ddc84; --kc-success-soft: rgba(61, 220, 132, 0.14); --kc-success-ink: #7cf0ad; --kc-warning: #f0b544; --kc-warning-soft: rgba(240, 181, 68, 0.14); --kc-warning-ink: #f7cf82; --kc-danger: #ff6b6b; --kc-danger-soft: rgba(255, 107, 107, 0.14); --kc-danger-ink: #ff9d9d; --kc-info: #a58cff; --kc-info-soft: rgba(165, 140, 255, 0.14); --kc-info-ink: #c4b3ff; --kc-shadow-color: 220 60% 2%; --kc-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); --kc-glow-accent: 0 0 0 4px rgba(78, 214, 193, 0.20); } } :root[data-theme="dark"] { --kc-bg: var(--kc-navy-950); --kc-bg-sunken: #050a13; --kc-surface: #0d1524; --kc-surface-raised: #131d30; --kc-surface-hover: #162135; --kc-border: #1e2b42; --kc-border-strong: #2c3c58; --kc-text: #e8eef7; --kc-text-muted: #9dabc2; --kc-text-subtle: #74829a; --kc-text-inverse: #04121a; --kc-accent: var(--kc-teal-300); --kc-accent-hover: var(--kc-teal-200); --kc-accent-active: var(--kc-teal-100); --kc-accent-soft: rgba(78, 214, 193, 0.12); --kc-accent-ink: var(--kc-teal-200); --kc-focus: var(--kc-teal-300); --kc-overlay: rgba(3, 6, 12, 0.72); --kc-success: #3ddc84; --kc-success-soft: rgba(61, 220, 132, 0.14); --kc-success-ink: #7cf0ad; --kc-warning: #f0b544; --kc-warning-soft: rgba(240, 181, 68, 0.14); --kc-warning-ink: #f7cf82; --kc-danger: #ff6b6b; --kc-danger-soft: rgba(255, 107, 107, 0.14); --kc-danger-ink: #ff9d9d; --kc-info: #a58cff; --kc-info-soft: rgba(165, 140, 255, 0.14); --kc-info-ink: #c4b3ff; --kc-shadow-color: 220 60% 2%; --kc-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05); --kc-glow-accent: 0 0 0 4px rgba(78, 214, 193, 0.20); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* -------------------------------------------------------------------------- 2. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--kc-font-sans); font-size: var(--kc-text-md); line-height: var(--kc-leading-normal); color: var(--kc-text); background: var(--kc-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; min-height: 100%; } img, svg, video, canvas { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--kc-accent-ink); text-decoration: none; } a:hover { color: var(--kc-accent-hover); } h1, h2, h3, h4, h5, h6 { font-family: var(--kc-font-display); font-weight: var(--kc-weight-semibold); line-height: var(--kc-leading-tight); letter-spacing: var(--kc-tracking-tight); color: var(--kc-text); text-wrap: balance; } p { text-wrap: pretty; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--kc-focus); outline-offset: 2px; border-radius: var(--kc-radius-xs); } ::selection { background: var(--kc-accent); color: var(--kc-text-inverse); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- 3. LAYOUT UTILITIES -------------------------------------------------------------------------- */ .kc-container { width: 100%; max-width: var(--kc-container); margin-inline: auto; padding-inline: var(--kc-space-6); } .kc-container--wide { max-width: var(--kc-container-wide); } @media (max-width: 640px) { .kc-container { padding-inline: var(--kc-space-5); } } .kc-row { display: flex; align-items: center; gap: var(--kc-space-3); } .kc-row--between { justify-content: space-between; } .kc-row--wrap { flex-wrap: wrap; } .kc-stack { display: flex; flex-direction: column; } .kc-stack-1 > * + * { margin-top: var(--kc-space-1); } .kc-stack-2 > * + * { margin-top: var(--kc-space-2); } .kc-stack-3 > * + * { margin-top: var(--kc-space-3); } .kc-stack-4 > * + * { margin-top: var(--kc-space-4); } .kc-stack-6 > * + * { margin-top: var(--kc-space-6); } .kc-stack-8 > * + * { margin-top: var(--kc-space-8); } .kc-grid { display: grid; gap: var(--kc-space-5); } .kc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kc-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } @media (max-width: 900px) { .kc-grid--3, .kc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .kc-grid--2, .kc-grid--3, .kc-grid--4 { grid-template-columns: minmax(0, 1fr); } } .kc-muted { color: var(--kc-text-muted); } .kc-subtle { color: var(--kc-text-subtle); } .kc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kc-mono { font-family: var(--kc-font-mono); font-variant-numeric: tabular-nums; } .kc-eyebrow { font-size: var(--kc-text-xs); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-wider); text-transform: uppercase; color: var(--kc-accent-ink); } .kc-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; } .kc-divider { height: 1px; background: var(--kc-border); border: 0; } /* -------------------------------------------------------------------------- 4. BUTTONS -------------------------------------------------------------------------- */ .kc-btn { --_bg: transparent; --_fg: var(--kc-text); --_bd: transparent; display: inline-flex; align-items: center; justify-content: center; gap: var(--kc-space-2); padding: 0 var(--kc-space-4); height: 40px; border: 1px solid var(--_bd); border-radius: var(--kc-radius-md); background: var(--_bg); color: var(--_fg); font-size: var(--kc-text-base); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-tight); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background-color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease), color var(--kc-dur-fast) var(--kc-ease), box-shadow var(--kc-dur-base) var(--kc-ease), transform var(--kc-dur-fast) var(--kc-ease); } .kc-btn:active { transform: translateY(0.5px); } .kc-btn svg { width: 16px; height: 16px; flex: none; } .kc-btn--primary { --_bg: var(--kc-accent); --_fg: var(--kc-text-inverse); --_bd: transparent; box-shadow: var(--kc-shadow-sm), var(--kc-shadow-inset); } .kc-btn--primary:hover { --_bg: var(--kc-accent-hover); color: var(--kc-text-inverse); box-shadow: var(--kc-shadow-md); } .kc-btn--primary:active { --_bg: var(--kc-accent-active); } .kc-btn--secondary { --_bg: var(--kc-surface); --_fg: var(--kc-text); --_bd: var(--kc-border-strong); box-shadow: var(--kc-shadow-xs); } .kc-btn--secondary:hover { --_bg: var(--kc-surface-hover); color: var(--kc-text); box-shadow: var(--kc-shadow-sm); } .kc-btn--ghost { --_fg: var(--kc-text-muted); } .kc-btn--ghost:hover { --_bg: var(--kc-surface-hover); --_fg: var(--kc-text); } .kc-btn--danger { --_bg: var(--kc-danger); --_fg: #fff; } .kc-btn--danger:hover { filter: brightness(0.94); color: #fff; } .kc-btn--sm { height: 32px; padding-inline: var(--kc-space-3); font-size: var(--kc-text-sm); border-radius: var(--kc-radius-sm); } .kc-btn--lg { height: 50px; padding-inline: var(--kc-space-6); font-size: var(--kc-text-md); border-radius: var(--kc-radius-lg); } .kc-btn--lg svg { width: 18px; height: 18px; } .kc-btn--icon { width: 40px; padding: 0; } .kc-btn--icon.kc-btn--sm { width: 32px; } .kc-btn--block { width: 100%; } .kc-btn[disabled], .kc-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .kc-btn[data-loading] { pointer-events: none; position: relative; color: transparent; } .kc-btn[data-loading]::after { content: ""; position: absolute; width: 15px; height: 15px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--_fg); animation: kc-spin 640ms linear infinite; } @keyframes kc-spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- 5. CARD -------------------------------------------------------------------------- */ .kc-card { background: var(--kc-surface); border: 1px solid var(--kc-border); border-radius: var(--kc-radius-xl); box-shadow: var(--kc-shadow-sm); overflow: hidden; } .kc-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--kc-space-4); padding: var(--kc-space-5) var(--kc-space-6); border-bottom: 1px solid var(--kc-border); } .kc-card__title { font-size: var(--kc-text-md); font-weight: var(--kc-weight-semibold); } .kc-card__sub { font-size: var(--kc-text-sm); color: var(--kc-text-muted); margin-top: var(--kc-space-1); } .kc-card__body { padding: var(--kc-space-6); } .kc-card__footer { padding: var(--kc-space-4) var(--kc-space-6); border-top: 1px solid var(--kc-border); background: var(--kc-bg-sunken); } .kc-card--flush .kc-card__body { padding: 0; } .kc-card--interactive { transition: transform var(--kc-dur-base) var(--kc-ease-out), box-shadow var(--kc-dur-base) var(--kc-ease-out), border-color var(--kc-dur-base) var(--kc-ease); } .kc-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--kc-shadow-lg); border-color: var(--kc-border-strong); } /* -------------------------------------------------------------------------- 6. STAT TILE -------------------------------------------------------------------------- */ .kc-stat { position: relative; background: var(--kc-surface); border: 1px solid var(--kc-border); border-radius: var(--kc-radius-lg); padding: var(--kc-space-5); box-shadow: var(--kc-shadow-xs); } .kc-stat__label { display: flex; align-items: center; gap: var(--kc-space-2); font-size: var(--kc-text-xs); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-wide); text-transform: uppercase; color: var(--kc-text-subtle); } .kc-stat__value { margin-top: var(--kc-space-2); font-size: var(--kc-text-3xl); font-weight: var(--kc-weight-semibold); line-height: var(--kc-leading-none); letter-spacing: var(--kc-tracking-tighter); font-variant-numeric: tabular-nums; } .kc-stat__meta { margin-top: var(--kc-space-2); font-size: var(--kc-text-sm); color: var(--kc-text-muted); } .kc-stat__delta { display: inline-flex; align-items: center; gap: var(--kc-space-1); font-size: var(--kc-text-sm); font-weight: var(--kc-weight-semibold); } .kc-stat__delta.is-up { color: var(--kc-success-ink); } .kc-stat__delta.is-down { color: var(--kc-danger-ink); } .kc-stat__icon { position: absolute; top: var(--kc-space-4); right: var(--kc-space-4); width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--kc-radius-sm); background: var(--kc-accent-soft); color: var(--kc-accent-ink); } .kc-stat__icon svg { width: 16px; height: 16px; } /* -------------------------------------------------------------------------- 7. TABLE -------------------------------------------------------------------------- */ .kc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .kc-table { width: 100%; border-collapse: collapse; font-size: var(--kc-text-base); white-space: nowrap; } .kc-table thead th { position: sticky; top: 0; background: var(--kc-bg-sunken); padding: var(--kc-space-3) var(--kc-space-4); text-align: left; font-size: var(--kc-text-xs); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-wide); text-transform: uppercase; color: var(--kc-text-subtle); border-bottom: 1px solid var(--kc-border); } .kc-table tbody td { padding: var(--kc-space-3) var(--kc-space-4); border-bottom: 1px solid var(--kc-border); color: var(--kc-text); vertical-align: middle; } .kc-table tbody tr { transition: background-color var(--kc-dur-fast) var(--kc-ease); } .kc-table tbody tr:hover { background: var(--kc-surface-hover); } .kc-table tbody tr:last-child td { border-bottom: 0; } .kc-table--zebra tbody tr:nth-child(even) { background: var(--kc-bg-sunken); } .kc-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; } .kc-table__actions { text-align: right; } /* -------------------------------------------------------------------------- 8. BADGE / PILL / CHIP -------------------------------------------------------------------------- */ .kc-badge { display: inline-flex; align-items: center; gap: var(--kc-space-1-5); padding: 3px var(--kc-space-2-5); border-radius: var(--kc-radius-full); background: var(--kc-bg-sunken); color: var(--kc-text-muted); font-size: var(--kc-text-xs); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-wide); line-height: 1.5; white-space: nowrap; border: 1px solid transparent; } .kc-badge--accent { background: var(--kc-accent-soft); color: var(--kc-accent-ink); } .kc-badge--success { background: var(--kc-success-soft); color: var(--kc-success-ink); } .kc-badge--warning { background: var(--kc-warning-soft); color: var(--kc-warning-ink); } .kc-badge--danger { background: var(--kc-danger-soft); color: var(--kc-danger-ink); } .kc-badge--info { background: var(--kc-info-soft); color: var(--kc-info-ink); } .kc-badge--neutral { background: var(--kc-bg-sunken); color: var(--kc-text-muted); border-color: var(--kc-border); } .kc-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .kc-chip { display: inline-flex; align-items: center; gap: var(--kc-space-2); padding: var(--kc-space-1-5) var(--kc-space-3); border: 1px solid var(--kc-border); border-radius: var(--kc-radius-full); background: var(--kc-surface); font-size: var(--kc-text-sm); color: var(--kc-text-muted); } .kc-kbd { font-family: var(--kc-font-mono); font-size: var(--kc-text-xs); padding: 2px 6px; border-radius: var(--kc-radius-xs); border: 1px solid var(--kc-border-strong); background: var(--kc-bg-sunken); color: var(--kc-text-muted); box-shadow: 0 1px 0 var(--kc-border-strong); } /* -------------------------------------------------------------------------- 9. FORM CONTROLS -------------------------------------------------------------------------- */ .kc-field { display: flex; flex-direction: column; gap: var(--kc-space-1-5); } .kc-label { font-size: var(--kc-text-sm); font-weight: var(--kc-weight-medium); color: var(--kc-text); } .kc-hint { font-size: var(--kc-text-xs); color: var(--kc-text-subtle); } .kc-input, .kc-select, .kc-textarea { width: 100%; min-height: 40px; padding: var(--kc-space-2) var(--kc-space-3); background: var(--kc-surface); border: 1px solid var(--kc-border-strong); border-radius: var(--kc-radius-md); color: var(--kc-text); font-size: var(--kc-text-base); transition: border-color var(--kc-dur-fast) var(--kc-ease), box-shadow var(--kc-dur-fast) var(--kc-ease); } .kc-textarea { min-height: 96px; resize: vertical; padding-block: var(--kc-space-2-5); } .kc-input::placeholder, .kc-textarea::placeholder { color: var(--kc-text-subtle); } .kc-input:focus, .kc-select:focus, .kc-textarea:focus { outline: none; border-color: var(--kc-accent); box-shadow: var(--kc-glow-accent); } .kc-select { appearance: none; padding-right: var(--kc-space-8); background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .kc-field--error .kc-input, .kc-field--error .kc-select, .kc-field--error .kc-textarea { border-color: var(--kc-danger); } .kc-field--error .kc-hint { color: var(--kc-danger-ink); } .kc-input[disabled], .kc-select[disabled], .kc-textarea[disabled] { background: var(--kc-bg-sunken); color: var(--kc-text-subtle); cursor: not-allowed; } .kc-input-group { display: flex; align-items: stretch; } .kc-input-group .kc-input { border-radius: var(--kc-radius-md) 0 0 var(--kc-radius-md); } .kc-input-group .kc-btn { border-radius: 0 var(--kc-radius-md) var(--kc-radius-md) 0; } .kc-search { position: relative; } .kc-search svg { position: absolute; left: var(--kc-space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--kc-text-subtle); pointer-events: none; } .kc-search .kc-input { padding-left: var(--kc-space-10); } .kc-checkbox, .kc-radio { display: inline-flex; align-items: center; gap: var(--kc-space-2); font-size: var(--kc-text-base); cursor: pointer; } .kc-checkbox input, .kc-radio input { width: 16px; height: 16px; accent-color: var(--kc-accent); flex: none; } .kc-switch { display: inline-flex; align-items: center; gap: var(--kc-space-2-5); cursor: pointer; } .kc-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .kc-switch__track { width: 38px; height: 22px; border-radius: var(--kc-radius-full); background: var(--kc-border-strong); position: relative; flex: none; transition: background-color var(--kc-dur-base) var(--kc-ease); } .kc-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--kc-shadow-sm); transition: transform var(--kc-dur-base) var(--kc-ease-spring); } .kc-switch input:checked + .kc-switch__track { background: var(--kc-accent); } .kc-switch input:checked + .kc-switch__track::after { transform: translateX(16px); } .kc-switch input:focus-visible + .kc-switch__track { box-shadow: var(--kc-glow-accent); } /* -------------------------------------------------------------------------- 10. NAV (top bar) -------------------------------------------------------------------------- */ .kc-nav { position: sticky; top: 0; z-index: var(--kc-z-sticky); min-height: var(--kc-topbar-h); background: color-mix(in srgb, var(--kc-bg) 82%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color var(--kc-dur-base) var(--kc-ease), background-color var(--kc-dur-base) var(--kc-ease); } .kc-nav.is-stuck { border-bottom-color: var(--kc-border); } .kc-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-space-6); min-height: var(--kc-topbar-h); } .kc-nav__brand { display: inline-flex; align-items: center; gap: var(--kc-space-2-5); color: var(--kc-text); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-tight); } .kc-nav__brand img, .kc-nav__brand svg { height: 30px; width: auto; } .kc-nav__links { display: flex; align-items: center; gap: var(--kc-space-1); } .kc-nav__link { padding: var(--kc-space-2) var(--kc-space-3); border-radius: var(--kc-radius-sm); font-size: var(--kc-text-base); font-weight: var(--kc-weight-medium); color: var(--kc-text-muted); transition: color var(--kc-dur-fast) var(--kc-ease), background-color var(--kc-dur-fast) var(--kc-ease); } .kc-nav__link:hover { color: var(--kc-text); background: var(--kc-surface-hover); } /* -------------------------------------------------------------------------- 11. SIDEBAR (product shell) -------------------------------------------------------------------------- */ .kc-sidebar { width: var(--kc-sidebar-w); flex: none; display: flex; flex-direction: column; gap: var(--kc-space-5); padding: var(--kc-space-4); background: var(--kc-bg-sunken); border-right: 1px solid var(--kc-border); overflow-y: auto; } .kc-sidebar__section { display: flex; flex-direction: column; gap: var(--kc-space-0-5); } .kc-sidebar__label { padding: var(--kc-space-2) var(--kc-space-3) var(--kc-space-1); font-size: var(--kc-text-2xs); font-weight: var(--kc-weight-semibold); letter-spacing: var(--kc-tracking-wider); text-transform: uppercase; color: var(--kc-text-subtle); } .kc-sidebar__item { display: flex; align-items: center; gap: var(--kc-space-2-5); padding: var(--kc-space-2) var(--kc-space-3); border-radius: var(--kc-radius-md); font-size: var(--kc-text-base); font-weight: var(--kc-weight-medium); color: var(--kc-text-muted); transition: color var(--kc-dur-fast) var(--kc-ease), background-color var(--kc-dur-fast) var(--kc-ease); } .kc-sidebar__item svg { width: 17px; height: 17px; flex: none; opacity: 0.85; } .kc-sidebar__item:hover { background: var(--kc-surface-hover); color: var(--kc-text); } .kc-sidebar__item.is-active { background: var(--kc-accent-soft); color: var(--kc-accent-ink); font-weight: var(--kc-weight-semibold); } .kc-sidebar__badge { margin-left: auto; } /* -------------------------------------------------------------------------- 12. MODAL -------------------------------------------------------------------------- */ .kc-modal-root { position: fixed; inset: 0; z-index: var(--kc-z-modal); display: grid; place-items: center; padding: var(--kc-space-5); } .kc-modal-root[hidden] { display: none; } .kc-modal__scrim { position: absolute; inset: 0; background: var(--kc-overlay); animation: kc-fade var(--kc-dur-base) var(--kc-ease); } .kc-modal { position: relative; width: min(560px, 100%); max-height: 86vh; overflow: auto; background: var(--kc-surface-raised); border: 1px solid var(--kc-border); border-radius: var(--kc-radius-xl); box-shadow: var(--kc-shadow-2xl); animation: kc-pop var(--kc-dur-slow) var(--kc-ease-out); } .kc-modal__header { padding: var(--kc-space-5) var(--kc-space-6); border-bottom: 1px solid var(--kc-border); } .kc-modal__body { padding: var(--kc-space-6); } .kc-modal__footer { padding: var(--kc-space-4) var(--kc-space-6); border-top: 1px solid var(--kc-border); display: flex; justify-content: flex-end; gap: var(--kc-space-2); } .kc-modal__close { position: absolute; top: var(--kc-space-4); right: var(--kc-space-4); } @keyframes kc-fade { from { opacity: 0; } } @keyframes kc-pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } } /* -------------------------------------------------------------------------- 13. TOAST -------------------------------------------------------------------------- */ .kc-toast-region { position: fixed; bottom: var(--kc-space-6); right: var(--kc-space-6); z-index: var(--kc-z-toast); display: flex; flex-direction: column; gap: var(--kc-space-2); max-width: min(380px, calc(100vw - var(--kc-space-10))); } .kc-toast { display: flex; align-items: flex-start; gap: var(--kc-space-3); padding: var(--kc-space-3) var(--kc-space-4); border-left: 3px solid var(--kc-accent); border-radius: var(--kc-radius-md); background: var(--kc-surface-raised); box-shadow: var(--kc-shadow-xl); font-size: var(--kc-text-base); animation: kc-toast-in var(--kc-dur-slow) var(--kc-ease-out); } .kc-toast--success { border-left-color: var(--kc-success); } .kc-toast--warning { border-left-color: var(--kc-warning); } .kc-toast--danger { border-left-color: var(--kc-danger); } .kc-toast__title { font-weight: var(--kc-weight-semibold); } .kc-toast__msg { color: var(--kc-text-muted); font-size: var(--kc-text-sm); } @keyframes kc-toast-in { from { opacity: 0; transform: translateX(16px); } } /* -------------------------------------------------------------------------- 14. SKELETON / PROGRESS / AVATAR / TABS / TOOLTIP -------------------------------------------------------------------------- */ .kc-skeleton { --_sk: color-mix(in srgb, var(--kc-text) 8%, transparent); background: linear-gradient(90deg, var(--_sk) 25%, color-mix(in srgb, var(--kc-text) 14%, transparent) 37%, var(--_sk) 63%); background-size: 400% 100%; border-radius: var(--kc-radius-sm); animation: kc-shimmer 1.4s ease-in-out infinite; } .kc-skeleton--text { height: 12px; } .kc-skeleton--title { height: 20px; width: 40%; border-radius: var(--kc-radius-xs); } .kc-skeleton--circle { width: 36px; height: 36px; border-radius: 50%; } .kc-skeleton--block { height: 120px; border-radius: var(--kc-radius-lg); } @keyframes kc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } .kc-progress { height: 6px; border-radius: var(--kc-radius-full); background: var(--kc-bg-sunken); overflow: hidden; } .kc-progress__bar { height: 100%; background: var(--kc-accent); border-radius: inherit; transition: width var(--kc-dur-slow) var(--kc-ease-out); } .kc-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--kc-accent-soft); color: var(--kc-accent-ink); font-size: var(--kc-text-xs); font-weight: var(--kc-weight-semibold); border: 2px solid var(--kc-surface); flex: none; } .kc-avatar-stack { display: flex; } .kc-avatar-stack .kc-avatar + .kc-avatar { margin-left: -10px; } .kc-tabs { display: flex; gap: var(--kc-space-1); border-bottom: 1px solid var(--kc-border); } .kc-tab { padding: var(--kc-space-2-5) var(--kc-space-3); font-size: var(--kc-text-base); font-weight: var(--kc-weight-medium); color: var(--kc-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; background: none; border-top: 0; border-inline: 0; transition: color var(--kc-dur-fast) var(--kc-ease), border-color var(--kc-dur-fast) var(--kc-ease); } .kc-tab:hover { color: var(--kc-text); } .kc-tab.is-active { color: var(--kc-accent-ink); border-bottom-color: var(--kc-accent); font-weight: var(--kc-weight-semibold); } .kc-tooltip { position: relative; } .kc-tooltip::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); padding: var(--kc-space-1) var(--kc-space-2-5); background: var(--kc-navy-900); color: #fff; font-size: var(--kc-text-xs); border-radius: var(--kc-radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--kc-dur-fast) var(--kc-ease); z-index: var(--kc-z-dropdown); } .kc-tooltip:hover::after, .kc-tooltip:focus-visible::after { opacity: 1; } /* -------------------------------------------------------------------------- 15. SCROLL REVEAL (degrades to visible with no JS / reduced motion) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .js .kc-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--kc-dur-slower) var(--kc-ease-out), transform var(--kc-dur-slower) var(--kc-ease-out); } .js .kc-reveal.is-visible { opacity: 1; transform: none; } }