/* ========================================================================== LKT Design Tokens Single source of truth for the whole theme. Every other stylesheet must consume these variables only — no hard-coded colors/sizes elsewhere. Colors were authored in OKLCH by the design; hex equivalents are provided for maximum compatibility (editor palette, older browsers, email). ========================================================================== */ :root { /* ---- Color: surfaces --------------------------------------------------- */ --lkt-color-bg: #FAF8F5; /* oklch(0.98 0.005 80) warm off-white page */ --lkt-color-surface: #FFFFFF; /* cards, panels */ --lkt-color-header-bg: #FEFBF7; /* oklch(0.99 0.006 80) */ --lkt-color-section-blue: #E6F0F8; /* oklch(0.95 0.015 240) light section bg */ --lkt-color-tint-blue: #E3F1FB; /* oklch(0.95 0.02 240) icon tiles/badges */ /* ---- Color: text ------------------------------------------------------- */ --lkt-color-text: #151B24; /* oklch(0.22 0.02 260) body */ --lkt-color-heading: #121B29; /* oklch(0.22 0.03 260) headings */ --lkt-color-muted: #474D58; /* oklch(0.42 0.02 260) muted text */ --lkt-color-muted-2: #4F5661; /* oklch(0.45 0.02 260) */ --lkt-color-nav: #2D333D; /* oklch(0.32 0.02 260) nav links */ /* ---- Color: brand ------------------------------------------------------ */ --lkt-color-navy: #17202B; /* oklch(0.24 0.025 255) footer / deep */ --lkt-color-navy-tint: #293442; /* oklch(0.32 0.03 255) footer social */ --lkt-color-blue: #003757; /* oklch(0.32 0.08 240) accent panels */ --lkt-color-blue-ink: #202938; /* oklch(0.28 0.03 260) */ --lkt-color-gold: #E1A035; /* oklch(0.75 0.14 75) primary CTA */ --lkt-color-gold-hover: #D48E00; /* oklch(0.7 0.15 75) */ --lkt-color-gold-ink: #1D1406; /* oklch(0.2 0.03 80) text on gold */ --lkt-color-success: #3A9742; /* oklch(0.6 0.15 145) license/valid dot */ --lkt-color-danger: #C0392B; /* form errors */ /* ---- Color: on-dark / on-panel ---------------------------------------- */ --lkt-color-on-navy: #D3D8DE; /* oklch(0.88 0.01 255) */ --lkt-color-on-navy-link: #AAAEB4; /* oklch(0.75 0.01 255) */ --lkt-color-on-navy-copy: #7C8186; /* oklch(0.6 0.01 255) */ --lkt-color-on-blue: #C3D0DA; /* oklch(0.85 0.02 240) */ --lkt-color-hero-sub: #E3E5E8; /* oklch(0.92 0.005 260) */ /* ---- Color: borders ---------------------------------------------------- */ --lkt-color-border: #E1DDD7; /* oklch(0.9 0.01 80) */ --lkt-color-border-soft: #E7E4DF; /* oklch(0.92 0.008 80) */ --lkt-color-border-softer: #EEEBE5; /* oklch(0.94 0.008 80) */ --lkt-color-border-navy: #293442; /* footer dividers on navy */ /* ---- Typography -------------------------------------------------------- */ --lkt-font-heading: 'Rubik', 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --lkt-font-body: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --lkt-fw-regular: 400; --lkt-fw-medium: 500; --lkt-fw-semibold:600; --lkt-fw-bold: 700; --lkt-fw-black: 800; /* fluid heading scale */ --lkt-fs-hero: clamp(1.5rem, 2.6vw, 2.375rem); /* 24 -> 38px H1 hero */ --lkt-fs-h1: clamp(1.6rem, 3vw, 2rem); /* 26 -> 32px */ --lkt-fs-h2: clamp(1.5rem, 2.4vw, 2rem); /* 24 -> 32px */ --lkt-fs-h3: 1.1875rem; /* 19px */ --lkt-fs-h4: 1.0625rem; /* 17px */ --lkt-fs-lg: 1.0625rem; /* 17px lead */ --lkt-fs-base: 1rem; /* 16px */ --lkt-fs-sm: 0.9375rem; /* 15px */ --lkt-fs-xs: 0.875rem; /* 14px */ --lkt-fs-2xs: 0.78125rem; /* 12.5px utility bar */ --lkt-lh-tight: 1.25; --lkt-lh-snug: 1.4; --lkt-lh-base: 1.6; --lkt-lh-relaxed:1.7; /* Hebrew running text */ --lkt-lh-loose: 1.8; /* ---- Spacing scale ----------------------------------------------------- */ --lkt-space-2xs: 0.25rem; /* 4 */ --lkt-space-xs: 0.5rem; /* 8 */ --lkt-space-sm: 0.75rem; /* 12 */ --lkt-space-md: 1rem; /* 16 */ --lkt-space-lg: 1.375rem; /* 22 */ --lkt-space-xl: 2rem; /* 32 */ --lkt-space-2xl: 3rem; /* 48 */ --lkt-space-3xl: 3.5rem; /* 56 */ --lkt-space-4xl: 4.5rem; /* 72 */ --lkt-space-5xl: 5.5rem; /* 88 */ /* section vertical rhythm (collapses on mobile via main.css) */ --lkt-section-y: 5.5rem; /* 88px */ --lkt-section-y-sm: 4.5rem;/* 72px */ /* ---- Layout ------------------------------------------------------------ */ --lkt-container: 1280px; --lkt-container-narrow:900px; --lkt-container-text: 760px; --lkt-gutter: 2rem; /* 32px desktop */ --lkt-gutter-m: 1.25rem;/* 20px mobile */ --lkt-header-h: 126px; /* desktop two-row header */ --lkt-header-h-m: 66px; /* mobile header */ /* ---- Radius ------------------------------------------------------------ */ --lkt-radius-sm: 8px; --lkt-radius-md: 10px; --lkt-radius-lg: 12px; --lkt-radius-xl: 16px; --lkt-radius-2xl: 24px; --lkt-radius-pill:999px; /* ---- Shadows ----------------------------------------------------------- */ --lkt-shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --lkt-shadow-md: 0 6px 20px rgba(0,0,0,0.10); --lkt-shadow-lg: 0 12px 34px rgba(0,0,0,0.14); --lkt-shadow-header: 0 1px 0 var(--lkt-color-border); /* ---- Motion ------------------------------------------------------------ */ --lkt-transition: 160ms ease; --lkt-marquee-duration: 26s; /* ---- Focus ------------------------------------------------------------- */ --lkt-focus-ring: 3px solid var(--lkt-color-blue); --lkt-focus-offset: 2px; /* ---- Z-index ----------------------------------------------------------- */ --lkt-z-header: 50; --lkt-z-sticky-cta: 60; --lkt-z-skiplink: 100; } /* Breakpoints (documented; used as @media literals across the theme): 980px — main nav collapses to hamburger 900px — multi-column grids collapse to 1 column 700px — footer 5-col + testimonials 3-col collapse 640px — utility bar hides, header shrinks, section gutters -> 20px */