/* ═══════════════════════════════════════════════════════════════ KREDITS — Design Tokens Import this file (and Google Fonts) before any other Kredits stylesheet. Does not produce any visual output by itself. Google Fonts link to add to every app : ═══════════════════════════════════════════════════════════════ */ :root { /* ── PRIMITIVE COLOURS ── */ --blue-50: #EFF6FF; --blue-100: #DBEAFE; --blue-600: #2563EB; --blue-700: #1D4ED8; --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-900: #111827; --green-600: #16A34A; --amber-600: #D97706; --red-600: #DC2626; --white: #FFFFFF; /* ── SEMANTIC COLOURS ── */ --color-bg: var(--gray-50); --color-surface: var(--white); --color-surface-subtle: var(--gray-100); --color-border: var(--gray-200); --color-border-strong: var(--gray-400); --color-text-primary: var(--gray-900); --color-text-secondary: var(--gray-600); --color-text-muted: var(--gray-500); --color-accent: var(--blue-600); --color-accent-hover: var(--blue-700); --color-accent-subtle: var(--blue-50); --color-success: var(--green-600); --color-warning: var(--amber-600); --color-danger: var(--red-600); /* ── TYPOGRAPHY ── */ --font-heading: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; --font-mono: 'JetBrains Mono', monospace; --text-xs: 12px; --leading-xs: 16px; --text-sm: 14px; --leading-sm: 20px; --text-base: 16px; --leading-base: 24px; --text-lg: 18px; --leading-lg: 28px; --text-xl: 20px; --leading-xl: 28px; --text-2xl: 24px; --leading-2xl: 32px; --text-3xl: 32px; --leading-3xl: 40px; --text-hero: clamp(40px, 8vw, 72px); /* ── SPACING (4 / 8 px grid) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ── RADIUS ── */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 9999px; /* ── SHADOW ── */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.08); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); /* ── SHELL STRUCTURAL DIMENSIONS (used by both CSS and JS) ── */ --ks-topbar-h: 48px; --ks-sidebar-w: 240px; --ks-sidebar-cw: 64px; /* collapsed width */ --ks-bottombar-h: 72px; --ks-mobile-bp: 768px; }