/* ========================================================================== Energy Klinik — design tokens Copied verbatim from the Claude Design project's design system: _ds/energy-klinik-design-system-e0297beb-.../tokens/{colors,typography,radii-shadows}.css Do not hand-edit values here; change them in the design system and re-import. Webfonts are loaded with a in each page (Sora / Public Sans / JetBrains Mono) rather than the design system's @import, to avoid a second round-trip. See README "Open items" about self-hosting woff2. ========================================================================== */ :root { /* ---- Brand: Klinik Blue (primary, cool steel) ---- */ --blue-50: #eef4f8; --blue-100: #d6e6ee; --blue-200: #aecdda; --blue-300: #7fadc2; --blue-400: #5b8ba5; --blue-500: #43728e; /* core brand */ --blue-600: #365d76; --blue-700: #2b4a5f; --blue-800: #223a4a; --blue-900: #182935; /* ---- Accent: Vital Teal (energy / icons / highlights) ---- */ --teal-50: #e6f6f9; --teal-100: #c4ecf2; --teal-200: #93dbe6; --teal-300: #57c4d6; --teal-400: #2fabc2; /* core accent */ --teal-500: #1f90a6; --teal-600: #1a7688; /* ---- Neutrals: cool slate ---- */ --slate-0: #ffffff; --slate-50: #f6f8f9; --slate-100:#eef2f4; --slate-200:#e2e8ec; --slate-300:#cdd7dd; --slate-400:#9aabb4; --slate-500:#6b7d87; --slate-600:#4c5d66; --slate-700:#33424b; --slate-800:#22303a; --slate-900:#152029; /* ---- Semantic status ---- */ --success: #3f9d6d; --success-soft: #e5f3ec; --warning: #d9922b; --warning-soft: #faf0dd; --danger: #cf5545; --danger-soft: #fbe9e6; --info: var(--teal-400); --info-soft: var(--teal-50); /* ---- Semantic aliases ---- */ --brand: var(--blue-500); --brand-hover: var(--blue-600); --brand-active: var(--blue-700); --accent: var(--teal-400); --accent-hover: var(--teal-500); --text-strong: var(--slate-900); --text-body: var(--slate-700); --text-muted: var(--slate-500); --text-onbrand: var(--slate-0); --text-accent: var(--teal-500); --surface-page: var(--slate-50); --surface-card: var(--slate-0); --surface-sunken: var(--slate-100); --surface-brand: var(--blue-500); --surface-brand-deep:var(--blue-700); --surface-tint: var(--teal-50); --border-subtle: var(--slate-200); --border-strong: var(--slate-300); --border-onbrand: rgba(255,255,255,.24); --focus-ring: var(--teal-400); /* ---- Families ---- */ --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif; --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace; /* ---- Weights ---- */ --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-extrabold: 800; /* ---- Type scale (1.250 major-third, 16px base) ---- */ --fs-eyebrow: 0.78rem; --fs-caption: 0.8125rem; --fs-small: 0.875rem; --fs-body: 1rem; --fs-lead: 1.125rem; --fs-h6: 1.1875rem; --fs-h5: 1.375rem; --fs-h4: 1.75rem; --fs-h3: 2.1875rem; --fs-h2: 2.75rem; --fs-h1: 3.4375rem; --fs-display: 4.25rem; /* ---- Line heights ---- */ --lh-tight: 1.1; --lh-heading: 1.2; --lh-snug: 1.4; --lh-body: 1.65; /* ---- Letter spacing ---- */ --ls-eyebrow: 0.14em; --ls-heading: -0.01em; --ls-display: -0.02em; /* ---- Corner radii ---- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ---- Elevation ---- */ --shadow-xs: 0 1px 2px rgba(21,32,41,.06); --shadow-sm: 0 2px 6px rgba(21,32,41,.06); --shadow-md: 0 8px 24px rgba(21,32,41,.08); --shadow-lg: 0 18px 46px rgba(21,32,41,.12); --shadow-brand: 0 14px 30px rgba(43,74,95,.28); /* ---- Focus ---- */ --ring: 0 0 0 3px rgba(47,171,194,.35); /* ---- Motion ---- */ --ease-standard: cubic-bezier(.2,.7,.3,1); --ease-out: cubic-bezier(.16,1,.3,1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* -------------------------------------------------------------------------- Page-level semantic mapping. The prototype declares these on its #ek-root wrapper; here they live on :root so every page inherits the same names. -------------------------------------------------------------------------- */ :root { --ink: var(--text-strong); --ink-soft: var(--text-body); --paper: var(--surface-page); --surface: var(--surface-card); --energy: var(--brand); --line: var(--border-subtle); /* Band scale — SEMANTIC ONLY (program intensity). Never decorative. */ --band-yellow: var(--warning); --band-red: var(--danger); --band-green: var(--success); --band-blue: var(--blue-500); /* Single easing for the whole site, per the build prompt. */ --ease-brand: cubic-bezier(0.33, 0, 0.15, 1); }