/* ==========================================================================
KLODERR — Colors & Type Foundation
Guangzhou Kloderr Technology Co., Ltd · 广州客劳得科技有限公司
"Orchestrate Agents. Build the Future."
--------------------------------------------------------------------------
Load fonts in HTML BEFORE this file:
========================================================================== */
:root {
/* ---------- BRAND GREEN SCALE ---------------------------------------- */
/* Derived from the logo: deep forest -> vivid emerald gradient. */
--kl-green-950: #032012;
--kl-green-900: #042B16;
--kl-green-800: #053D20;
--kl-green-700: #045C2D;
--kl-green-600: #047A3B; /* deep brand green (icon body) */
--kl-green-500: #0B8F45; /* PRIMARY */
--kl-green-400: #16A34A; /* bright emerald accent (gradient tip) */
--kl-green-300: #4CC178;
--kl-green-200: #9FE0B6;
--kl-green-100: #DCF4E5;
--kl-green-50: #F0FAF3;
/* Signature wordmark gradient (dark -> emerald, used on the "r") */
--kl-gradient-brand: linear-gradient(105deg, #045C2D 0%, #0B8F45 55%, #19B254 100%);
--kl-gradient-brand-soft: linear-gradient(120deg, #0B8F45 0%, #16A34A 100%);
/* ---------- NEUTRALS (cool, faintly green-tinted ink) ---------------- */
--kl-ink: #0E1A14; /* fg1 — headings, primary text */
--kl-fg-2: #344740; /* fg2 — body text */
--kl-fg-3: #62736B; /* fg3 — secondary / muted */
--kl-fg-4: #93A39B; /* fg4 — placeholder / faint (tagline gray) */
--kl-bg-1: #FFFFFF; /* page */
--kl-bg-2: #F6F9F7; /* subtle surface / app canvas */
--kl-bg-3: #EDF3EF; /* sunken / hover fill */
--kl-surface-dark: #07140D; /* dark sections / footer / hero */
--kl-surface-dark-2: #0C2017;
--kl-border: #E4EBE7; /* hairline */
--kl-border-strong: #CDDAD2; /* inputs, dividers under pressure */
--kl-border-dark: #173326; /* borders on dark surfaces */
/* ---------- SEMANTIC -------------------------------------------------- */
--kl-primary: var(--kl-green-500);
--kl-primary-hover: var(--kl-green-600);
--kl-primary-active: var(--kl-green-700);
--kl-primary-fg: #FFFFFF;
--kl-link: var(--kl-green-600);
--kl-success: #0B8F45;
--kl-success-bg:#E4F6EB;
--kl-warning: #B5750A;
--kl-warning-bg:#FBF1DC;
--kl-danger: #C03A2B;
--kl-danger-bg: #FBE9E7;
--kl-info: #2F6FB0;
--kl-info-bg: #E7F0F9;
/* status dots for agent/run states */
--kl-status-running: #16A34A;
--kl-status-idle: #93A39B;
--kl-status-queued: #B5750A;
--kl-status-failed: #C03A2B;
/* ---------- RADII ----------------------------------------------------- */
--kl-r-xs: 4px;
--kl-r-sm: 7px;
--kl-r-md: 11px;
--kl-r-lg: 16px;
--kl-r-xl: 24px;
--kl-r-pill: 999px;
/* ---------- SHADOWS / ELEVATION -------------------------------------- */
/* soft, low-spread, faintly green-cool — never heavy black */
--kl-shadow-xs: 0 1px 2px rgba(7,20,13,0.06);
--kl-shadow-sm: 0 1px 3px rgba(7,20,13,0.07), 0 1px 2px rgba(7,20,13,0.05);
--kl-shadow-md: 0 4px 14px rgba(7,20,13,0.08), 0 2px 5px rgba(7,20,13,0.05);
--kl-shadow-lg: 0 14px 40px rgba(7,20,13,0.12), 0 4px 12px rgba(7,20,13,0.06);
--kl-shadow-focus: 0 0 0 3px rgba(11,143,69,0.28);
--kl-glow-green: 0 0 0 1px rgba(22,163,74,0.30), 0 8px 30px rgba(22,163,74,0.22);
/* ---------- SPACING (4px base) --------------------------------------- */
--kl-space-1: 4px;
--kl-space-2: 8px;
--kl-space-3: 12px;
--kl-space-4: 16px;
--kl-space-5: 24px;
--kl-space-6: 32px;
--kl-space-7: 48px;
--kl-space-8: 64px;
--kl-space-9: 96px;
/* ---------- TYPE FAMILIES -------------------------------------------- */
/* Display/brand: geometric rounded sans matching the "kloderr" wordmark */
--kl-font-display: "Poppins", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
/* UI/body: humanist grotesk, friendly + legible */
--kl-font-body: "Manrope", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
/* Mono: agent logs, code, run IDs, telemetry */
--kl-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
/* weights */
--kl-w-regular: 400;
--kl-w-medium: 500;
--kl-w-semibold: 600;
--kl-w-bold: 700;
}
/* ==========================================================================
SEMANTIC TYPE — apply classes or copy the rules
========================================================================== */
.kl-display {
font-family: var(--kl-font-display);
font-weight: 700;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.04;
letter-spacing: -0.02em;
color: var(--kl-ink);
text-wrap: balance;
}
.kl-h1 {
font-family: var(--kl-font-display);
font-weight: 600;
font-size: 40px;
line-height: 1.1;
letter-spacing: -0.018em;
color: var(--kl-ink);
text-wrap: balance;
}
.kl-h2 {
font-family: var(--kl-font-display);
font-weight: 600;
font-size: 28px;
line-height: 1.18;
letter-spacing: -0.012em;
color: var(--kl-ink);
}
.kl-h3 {
font-family: var(--kl-font-display);
font-weight: 600;
font-size: 20px;
line-height: 1.25;
letter-spacing: -0.006em;
color: var(--kl-ink);
}
.kl-eyebrow {
font-family: var(--kl-font-body);
font-weight: 700;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--kl-green-600);
}
.kl-lead {
font-family: var(--kl-font-body);
font-weight: 400;
font-size: 19px;
line-height: 1.55;
color: var(--kl-fg-2);
}
.kl-body {
font-family: var(--kl-font-body);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
color: var(--kl-fg-2);
}
.kl-small {
font-family: var(--kl-font-body);
font-weight: 500;
font-size: 13px;
line-height: 1.45;
color: var(--kl-fg-3);
}
.kl-mono {
font-family: var(--kl-font-mono);
font-weight: 500;
font-size: 13px;
line-height: 1.5;
letter-spacing: -0.01em;
color: var(--kl-fg-2);
}
.kl-label {
font-family: var(--kl-font-body);
font-weight: 600;
font-size: 13px;
line-height: 1.3;
letter-spacing: 0.01em;
color: var(--kl-fg-2);
}
/* Brand gradient text — for accent words / the trailing brand mark */
.kl-grad-text {
background: var(--kl-gradient-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}