/* ========================================================================== Kick of R&D — Global Design Tokens (Dark Theme) -------------------------------------------------------------------------- Palette rationale: • Backgrounds pull from the deep navy in the logo's lower half. • Orange accent (#E8582A) is the logo flame — used sparingly for CTAs, active states, and section accent bars (the brand's "heat" signal). • Blue tones (#1E3A8A → #3B82F6) map to the logo's circuit board — used for secondary UI, link hovers, and the hero SVG traces. • Cyan (#06B6D4) represents liquid-cooling fluid — used for data-stream animation glows and subtle interactive feedback. • Neutral scale is tinted slightly blue-gray to stay cohesive on dark. ========================================================================== */ :root { /* ── Backgrounds ────────────────────────────────────────────────────── */ --krd-bg-primary: #0B0F19; /* deepest layer — */ --krd-bg-secondary: #111827; /* cards, elevated surfaces */ --krd-bg-tertiary: #1A2235; /* hover lifts, active rows */ --krd-bg-glass: rgba(17, 24, 39, 0.72); /* frosted overlays */ /* ── Accent: Orange (Flame) ─────────────────────────────────────────── */ --krd-orange: #E8582A; --krd-orange-hover: #F26B3A; --krd-orange-glow: rgba(232, 88, 42, 0.25); /* ── Accent: Blue (Circuit) ─────────────────────────────────────────── */ --krd-blue-deep: #1E3A8A; --krd-blue-mid: #2563EB; --krd-blue-bright: #3B82F6; --krd-blue-glow: rgba(37, 99, 235, 0.20); /* ── Accent: Cyan (Liquid Cooling) ──────────────────────────────────── */ --krd-cyan: #06B6D4; --krd-cyan-glow: rgba(6, 182, 212, 0.18); /* ── Text ───────────────────────────────────────────────────────────── */ --krd-text-primary: #F0F6FC; /* headlines, high-emphasis body */ --krd-text-secondary: #9CA3AF; /* descriptions, meta */ --krd-text-muted: #6B7280; /* captions, disabled */ /* ── Borders & Dividers ─────────────────────────────────────────────── */ --krd-border: rgba(255, 255, 255, 0.06); --krd-border-active: rgba(232, 88, 42, 0.40); /* ── Typography ─────────────────────────────────────────────────────── */ /* * Space Grotesk — geometric, slightly squared terminals. * Feels engineered without being cold. Used for headlines only. * * Inter — workhorse body text, excellent at small sizes on screens. * * JetBrains Mono — metrics readouts, data labels, code snippets. */ --krd-font-display: 'Space Grotesk', system-ui, sans-serif; --krd-font-body: 'Inter', system-ui, sans-serif; --krd-font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ── Type Scale (fluid, clamp-based) ────────────────────────────────── */ --krd-fs-hero: clamp(2.25rem, 5vw + 1rem, 4.5rem); --krd-fs-h2: clamp(1.75rem, 3vw + 0.5rem, 3rem); --krd-fs-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem); --krd-fs-body: 1rem; --krd-fs-small: 0.875rem; --krd-fs-caption: 0.75rem; --krd-lh-tight: 1.15; --krd-lh-body: 1.6; --krd-fw-regular: 400; --krd-fw-medium: 500; --krd-fw-semibold: 600; --krd-fw-bold: 700; /* ── Spacing ────────────────────────────────────────────────────────── */ --krd-space-xs: 0.5rem; --krd-space-sm: 1rem; --krd-space-md: 1.5rem; --krd-space-lg: 3rem; --krd-space-xl: 5rem; --krd-space-2xl: 8rem; /* ── Layout ─────────────────────────────────────────────────────────── */ --krd-max-width: 1280px; --krd-gutter: clamp(1rem, 3vw, 2rem); /* ── Radii ──────────────────────────────────────────────────────────── */ --krd-radius-sm: 4px; --krd-radius-md: 8px; --krd-radius-lg: 16px; /* ── Transitions ────────────────────────────────────────────────────── */ --krd-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --krd-duration-fast: 150ms; --krd-duration-normal: 300ms; /* ── Z-layers ───────────────────────────────────────────────────────── */ --krd-z-bg: -1; --krd-z-content: 1; --krd-z-nav: 100; --krd-z-overlay: 200; } /* ── Base Resets (scoped to theme) ──────────────────────────────────────── */ body.krd-dark { margin: 0; background-color: var(--krd-bg-primary); color: var(--krd-text-primary); font-family: var(--krd-font-body); font-size: var(--krd-fs-body); line-height: var(--krd-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Reduced-motion: disable all custom animations globally */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }