/* ============================================================ KineTrax (KTS) — Design Tokens Calm, credible, exact, modern. Regulated medtech over hype. ============================================================ */ :root { /* ───────────────────────── PRIMITIVES ───────────────────────── */ /* Brand */ --kt-deep-blue: #0F2D4E; /* primary, headlines, chrome */ --kt-deep-blue-700: #122F55; --kt-deep-blue-600: #1A4A82; --kt-midnight: #0B1530; /* dark pitch/marketing surface */ --kt-midnight-900: #060B1F; --kt-teal: #1CB7B5; /* accent, data-viz, highlights */ --kt-teal-600: #159998; --kt-teal-100: #D6F2F1; --kt-ice-blue: #9ED6F2; /* light-blue waveform accent */ /* Neutrals */ --kt-charcoal: #1F2631; /* primary body text */ --kt-slate: #6C7A89; /* secondary text / metadata */ --kt-slate-400: #9AA6B2; --kt-hairline: #DFE5EB; /* borders, dividers */ --kt-off-white: #F7F9FC; /* app background */ --kt-white: #FFFFFF; /* card surface */ --kt-black: #000000; /* Status (derived for medtech clarity) */ --kt-success: #137D5E; --kt-success-bg: #E6F4EE; --kt-warning: #B26A00; --kt-warning-bg: #FBEFD8; --kt-danger: #B3261E; --kt-danger-bg: #FBEAE8; --kt-info: #0F2D4E; --kt-info-bg: #E6ECF3; /* Shadow system (from Figma: card shadow + hairline) */ --kt-shadow-xs: 0 0 3px 0 rgba(0, 0, 0, 0.15); --kt-shadow-sm: 0 1px 2px 0 rgba(15, 45, 78, 0.06), 0 0 0 1px rgba(15, 45, 78, 0.04); --kt-shadow-md: 0 5px 20px 0 rgba(0, 0, 0, 0.10), 0 0 3px 0 rgba(0, 0, 0, 0.30); --kt-shadow-lg: 0 12px 32px 0 rgba(15, 45, 78, 0.14), 0 0 0 1px rgba(15, 45, 78, 0.06); --kt-focus-ring: 0 0 0 3px rgba(28, 183, 181, 0.35); /* Radius scale (informed by Figma radii: 18, 27, 41, 53, 99) */ --kt-radius-xs: 4px; --kt-radius-sm: 8px; --kt-radius-md: 12px; /* chips, inputs */ --kt-radius-lg: 18px; /* buttons, swatches */ --kt-radius-xl: 24px; /* standard cards */ --kt-radius-2xl: 32px; /* large cards */ --kt-radius-pill: 999px; /* Spacing (4-pt grid) */ --kt-space-1: 4px; --kt-space-2: 8px; --kt-space-3: 12px; --kt-space-4: 16px; --kt-space-5: 20px; --kt-space-6: 24px; --kt-space-8: 32px; --kt-space-10: 40px; --kt-space-12: 48px; --kt-space-16: 64px; --kt-space-20: 80px; /* Motion (restrained, trustworthy) */ --kt-ease-standard: cubic-bezier(0.2, 0.0, 0.0, 1.0); --kt-ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0); --kt-dur-fast: 120ms; --kt-dur-base: 200ms; --kt-dur-slow: 320ms; /* ───────────────────────── TYPE ───────────────────────── */ --kt-font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --kt-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Fluid-ish size scale for screen + slide usage */ --kt-fs-display: 56px; /* Presentation display, hero */ --kt-fs-h1: 48px; /* Slide lead / page H1 */ --kt-fs-h2: 36px; --kt-fs-h3: 28px; /* Card titles */ --kt-fs-h4: 22px; --kt-fs-lead: 23px; /* Body-lead from Figma */ --kt-fs-body: 16px; --kt-fs-sm: 14px; --kt-fs-xs: 12px; --kt-fs-label: 11px; /* Caps labels */ --kt-lh-tight: 1.05; --kt-lh-snug: 1.20; --kt-lh-normal: 1.45; --kt-lh-relaxed: 1.60; --kt-tracking-tight: -0.01em; --kt-tracking-normal: 0; --kt-tracking-label: 0.08em; /* ─────────────────── SEMANTIC TOKENS ─────────────────── */ --fg-1: var(--kt-charcoal); /* primary text */ --fg-2: var(--kt-slate); /* secondary text */ --fg-3: var(--kt-slate-400); /* muted / meta */ --fg-brand: var(--kt-deep-blue); /* titles, chrome */ --fg-accent: var(--kt-teal); --fg-inverse: var(--kt-off-white); --bg-canvas: var(--kt-off-white); --bg-surface: var(--kt-white); --bg-raised: var(--kt-white); --bg-brand: var(--kt-deep-blue); --bg-accent: var(--kt-teal); --bg-muted: #EEF2F7; --border-1: var(--kt-hairline); --border-2: #CDD5DF; --border-focus: var(--kt-teal); --link: var(--kt-deep-blue-600); --link-hover: var(--kt-deep-blue); --link-visited: #4C3A82; } /* ─────────────────── SEMANTIC CSS ─────────────────── */ html { color-scheme: light; } body { font-family: var(--kt-font-sans); font-size: var(--kt-fs-body); line-height: var(--kt-lh-normal); color: var(--fg-1); background: var(--bg-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--kt-font-sans); color: var(--fg-brand); font-weight: 700; letter-spacing: var(--kt-tracking-tight); line-height: var(--kt-lh-tight); margin: 0 0 var(--kt-space-4); } h1 { font-size: var(--kt-fs-h1); } h2 { font-size: var(--kt-fs-h2); } h3 { font-size: var(--kt-fs-h3); } h4 { font-size: var(--kt-fs-h4); font-weight: 600; } .kt-display { font-size: var(--kt-fs-display); font-weight: 700; line-height: var(--kt-lh-tight); letter-spacing: var(--kt-tracking-tight); color: var(--fg-brand); } .kt-lead { font-size: var(--kt-fs-lead); line-height: var(--kt-lh-snug); color: var(--fg-1); } p { margin: 0 0 var(--kt-space-4); color: var(--fg-1); } small { font-size: var(--kt-fs-sm); color: var(--fg-2); } .kt-label { font-size: var(--kt-fs-label); font-weight: 600; letter-spacing: var(--kt-tracking-label); text-transform: uppercase; color: var(--fg-2); } code, kbd, pre, .kt-mono { font-family: var(--kt-font-mono); font-size: 0.9em; } code { padding: 2px 6px; background: var(--bg-muted); border-radius: var(--kt-radius-xs); color: var(--fg-brand); } a { color: var(--link); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--kt-dur-base) var(--kt-ease-standard), color var(--kt-dur-base) var(--kt-ease-standard); } a:hover { color: var(--link-hover); border-bottom-color: currentColor; } a:focus-visible { outline: none; box-shadow: var(--kt-focus-ring); border-radius: 2px; } hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--kt-space-8) 0; } ::selection { background: var(--kt-teal-100); color: var(--kt-deep-blue); }