/* ========================================================================== KARADIGM - tokens.css Heart of the design system. Changing these variables re-skins everything. Dark values live in :root; the .light overrides sit at the bottom (the index runtime theme-toggle reads them - other pages just swap to tokens-light.css). TABLE OF CONTENTS (:root groups) grayscale (core) · accents · typography · spacing · misc · responsive scaling · .light variant (mirror) ========================================================================== */ :root { /* ---------- grayscale (core) ---------- */ --bg0: #0e0e0e; /* main background */ --bg1: #171717; /* raised / card */ --bg2: #090909; /* secondary / depth (header, footer) */ --fg0: #e7e7e7; /* primary text */ --fg1: #c8c8c8; /* muted text */ --line: #4c4c4c; /* border (subtle) */ /* ---------- accents (sparing, semantic) ---------- */ --acc-neutral: #888888; /* primary / resting accent */ --acc-blue: #5599dd; /* info */ --acc-green: #4d8a6b; /* success / tip */ --acc-red: #8a4d4d; /* warning / error */ --acc: var(--acc-neutral); /* active accent */ --acc-hover: color-mix(in srgb, var(--acc) 75%, black); /* accent hover */ /* ---------- typography ---------- UI/headings: Inter (geometric). Reading text: a humanist sans for a softer, roomier read. Code: monospace. */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-h1: 2.6rem; --fs-h2: 1.9rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-h5: 1.1rem; --fs-h6: 0.95rem; --fs-body: 1.0rem; --fs-small: 0.875rem; --lh-heading: 1.15; --lh-body: 1.75; /* ---------- spacing (base 4px) ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; /* ---------- misc ---------- */ --radius: 6px; --radius-sm: 2px; --field-height: 56px; /* shared height for inputs & action buttons */ --content-width: 1240px; /* main content column on desktop */ --wrap: 1600px; /* wide-layout max width (capped for ultra-wide) */ --transition: 0.15s ease; /* ---------- responsive scaling ---------- Fluid horizontal page gutter and vertical section rhythm: grow with the viewport between sensible floors/ceilings, so spacing scales smoothly from phone → tablet → wide monitor instead of jumping at breakpoints. */ --gutter: clamp(16px, 4vw, 56px); /* page side padding */ --section-gap: clamp(48px, 9vw, 96px); /* vertical rhythm between sections */ --block-pad: clamp(48px, 7vw, 96px); /* top/bottom padding of main & footer */ } /* ---------- light variant (mirror) ---------- Used by the runtime theme toggle on index.html (.light on ). The per-page light files instead link tokens-light.css. */ .light { --bg0: #fcfcfc; --bg1: #ffffff; --bg2: #f4f4f4; --fg0: #4c4c4c; --fg1: #6a6a6a; --line: #c8c8c8; } /* keep the header dark in light mode (same as the other pages) - full dark palette */ .light .site-header { --bg0: #0e0e0e; --bg1: #171717; --bg2: #090909; --fg0: #e7e7e7; --fg1: #c8c8c8; --line: #4c4c4c; /* force the light-mode header to the exact same DARK fill as dark mode, opaque, so it can never read lighter (no hero/page bleeding through). */ background: linear-gradient(90deg, rgba(85, 153, 221, 0.09), rgba(77, 138, 107, 0.09), rgba(138, 77, 77, 0.09)), linear-gradient(180deg, #090909, #0e0e0e); } /* The slide-down MOBILE panel inherits the header's dark tokens as-is and gets the header's accent-wash + gradient + tri-accent hairline (in layout.css), but OPAQUE - so in light mode the white page body can't bleed through the menu. */ /* hero plate stays dark in light mode too, but a touch LIGHTER than dark mode (a dark slate, not near-black) so the two themes read differently. */ /* Light-mode hero keeps a DARK, moody scrim - a photo behind white text needs it, otherwise a pale veil just washes the image out. So in light mode the hero reads almost like the dark hero: rich photo, white title. A slate (not pure black) distinguishes it just enough from the dark theme. */ .light .hero { /* scrim/surfaces match the DARK hero exactly, so the translucent header + mobile menu (which sit over the hero) look ABSOLUTELY the same in dark and light. Only the text stays pure-white for the title. */ --bg0: #0e0e0e; --bg1: #171717; --bg2: #090909; --fg0: #ffffff; --fg1: #d8d8d8; --line: #4c4c4c; } /* ────────────────────────────────────────────────────────────────────────── Karadigm - design system & templates crafted by Luko Karavan https://lukokaravan.com ────────────────────────────────────────────────────────────────────────── */