/* ============================================================ Kulanet — Design System Tokens Import this into any page: ... // light ... // dark ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Work+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); .kn { /* ── Type families ───────────────────────────────────────── */ --kn-display: 'Work Sans', ui-sans-serif, system-ui, sans-serif; --kn-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif; --kn-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* ── Brand flame (gradient stops) ────────────────────────── */ --kn-ember-deep: #9A2414; /* primary CTA in light mode */ --kn-ember: #D7402A; /* primary CTA in dark mode */ --kn-flame: #F28B30; --kn-amber: #F5B04B; --kn-magenta: #B34096; --kn-purple: #6E3E99; /* Light-mode brand gradient — full red→orange→magenta→purple. Use ONLY for: top hairline, one headline word, numbered badges, data bars. */ --kn-gradient: linear-gradient(92deg, #D7402A 0%, #F28B30 36%, #B34096 72%, #6E3E99 100%); /* Dark-mode gradient — skips deep purple; ends at warm magenta so text and bars stay legible on near-black. */ --kn-gradient-dark: linear-gradient(92deg, #F28B30 0%, #F5B04B 22%, #EE6D3A 48%, #E24B7F 74%, #C94AA8 100%); /* ── Neutrals (light mode) ───────────────────────────────── */ --kn-white: #FFFFFF; --kn-paper: #F7F5F2; /* page bg */ --kn-linen: #F4EADF; /* warm accent surface, cards */ --kn-line: #E8E4DE; /* hairlines */ --kn-muted: #8A7D74; /* meta, labels */ --kn-ink-2: #3D332E; /* body */ --kn-ink: #1A1614; /* headings, primary ink */ /* ── Dark neutrals (applied via .kn.dark) ────────────────── */ --kn-night: #15110F; /* warm near-black page bg */ --kn-night-2: #1D1815; /* cards */ --kn-night-3: #2A2320; /* hairlines in dark */ --kn-bone: #F5EFE7; /* headings in dark */ --kn-bone-2: #BFB4AB; /* body in dark */ --kn-ash: #8A7D74; /* muted in dark (same as light, works) */ --kn-ash-2: #4A3F38; /* borders/dividers mid-weight */ /* ── Semantic aliases (rebind in .kn.dark below) ─────────── */ --kn-bg: var(--kn-paper); --kn-surface: var(--kn-white); --kn-surface-2: var(--kn-linen); --kn-border: var(--kn-line); --kn-text: var(--kn-ink); --kn-text-2: var(--kn-ink-2); --kn-text-mute: var(--kn-muted); --kn-primary: var(--kn-ember-deep); --kn-primary-hover: var(--kn-ember); --kn-grad: var(--kn-gradient); /* ── Radii, elevation, motion ────────────────────────────── */ --kn-r-xs: 4px; --kn-r-sm: 6px; --kn-r-md: 10px; --kn-r-lg: 14px; --kn-r-xl: 20px; --kn-r-pill: 999px; --kn-shadow-1: 0 1px 2px rgba(26,22,20,0.04), 0 1px 1px rgba(26,22,20,0.03); --kn-shadow-2: 0 4px 16px rgba(26,22,20,0.06), 0 1px 2px rgba(26,22,20,0.04); --kn-shadow-3: 0 18px 48px rgba(26,22,20,0.10), 0 2px 4px rgba(26,22,20,0.04); --kn-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ── Type scale ─────────────────────────────────────────── */ --kn-t-display: 600 clamp(44px, 6vw, 72px)/1.04 var(--kn-display); --kn-t-h1: 600 clamp(34px, 4.2vw, 54px)/1.06 var(--kn-display); --kn-t-h2: 600 clamp(26px, 2.8vw, 36px)/1.12 var(--kn-display); --kn-t-h3: 600 20px/1.25 var(--kn-display); --kn-t-h4: 600 16px/1.3 var(--kn-display); --kn-t-body: 400 17px/1.65 var(--kn-body); --kn-t-body-lg: 400 20px/1.55 var(--kn-body); --kn-t-small: 400 15px/1.6 var(--kn-body); --kn-t-meta: 500 13px/1.45 var(--kn-body); --kn-t-eyebrow: 600 12px/1 var(--kn-body); --kn-t-mono: 400 14px/1.5 var(--kn-mono); } /* ── Dark mode rebinding ──────────────────────────────────── */ .kn.dark { --kn-bg: var(--kn-night); --kn-surface: var(--kn-night-2); --kn-surface-2: #24201C; --kn-border: var(--kn-night-3); --kn-text: var(--kn-bone); --kn-text-2: var(--kn-bone-2); --kn-text-mute: var(--kn-ash); --kn-primary: var(--kn-ember); --kn-primary-hover: #E85540; --kn-grad: var(--kn-gradient-dark); } /* ── Reset-ish base ───────────────────────────────────────── */ .kn *, .kn *::before, .kn *::after { box-sizing: border-box; } .kn body, .kn { font: var(--kn-t-body); color: var(--kn-text); background: var(--kn-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-wrap: pretty; } /* ── Utility: gradient text / bar / hairline ─────────────── */ .kn .kn-grad-text { background: var(--kn-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; } .kn .kn-grad-bar { height: 3px; width: 100%; background: var(--kn-grad); border: 0; } .kn .kn-grad-badge { display: inline-flex; align-items: center; justify-content: center; font: 700 13px/1 var(--kn-display); letter-spacing: 0.04em; width: 28px; height: 28px; border-radius: var(--kn-r-pill); background: var(--kn-grad); color: #fff; } /* ── Eyebrow / meta labels ───────────────────────────────── */ .kn .kn-eyebrow { font: var(--kn-t-eyebrow); letter-spacing: 0.16em; text-transform: uppercase; color: var(--kn-primary); } .kn.dark .kn-eyebrow { color: var(--kn-flame); } /* ── Button primitives ────────────────────────────────────── */ .kn .kn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; border-radius: var(--kn-r-sm); font: 500 16px/1 var(--kn-body); text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s var(--kn-ease), transform .15s var(--kn-ease), border-color .15s var(--kn-ease), color .15s var(--kn-ease); } .kn .kn-btn-primary { background: var(--kn-primary); color: #fff; } .kn .kn-btn-primary:hover { background: var(--kn-primary-hover); transform: translateY(-1px); } .kn .kn-btn-ghost { background: transparent; color: var(--kn-text); border-color: var(--kn-border); } .kn .kn-btn-ghost:hover { border-color: var(--kn-text); } /* ── Card ─────────────────────────────────────────────────── */ .kn .kn-card { background: var(--kn-surface); border: 1px solid var(--kn-border); border-radius: var(--kn-r-lg); padding: 28px; } /* ── Focus ────────────────────────────────────────────────── */ .kn :focus-visible { outline: 2px solid var(--kn-flame); outline-offset: 2px; border-radius: var(--kn-r-sm); }