/* ============================================================================= Little Guy Dev — Design System · Tokens & Base v1.0 · "Refined Cosmic" · dark-first, dual-mode Created by Charlie Manning / Little Guy Dev, LLC. Load order on the site: 1) Fonts (see README) — Syne, Inter, JetBrains Mono 2) tokens.css (this file) 3) your component / page styles Theme: dark is the default (:root). Add data-theme="light" on for light. ============================================================================= */ /* --------------------------------------------------------------------------- 1 · RAW RAMPS (constant across themes — never bind UI to these directly, use the semantic aliases in §2 so light/dark stays consistent) --------------------------------------------------------------------------- */ :root { /* Cosmos — cool near-black → near-white neutrals with a slight violet bias. Chosen, not defaulted: every step leans a few degrees toward the brand hue. */ --cosmos-1000: #060611; /* the void — deepest ground */ --cosmos-950: #0A0A18; /* page background (dark) */ --cosmos-900: #0F0F20; --cosmos-850: #14142A; /* surface */ --cosmos-800: #1A1A33; /* raised surface */ --cosmos-750: #212140; /* overlay / popover */ --cosmos-700: #29294D; /* strong border */ --cosmos-600: #363660; --cosmos-500: #4C4C7A; --cosmos-400: #6E6E9C; /* subtle text */ --cosmos-300: #9494BC; /* muted text */ --cosmos-200: #BEBEDA; /* secondary text */ --cosmos-100: #E2E2F0; --cosmos-50: #F2F2FA; /* page background (light) */ --starlight-white: #F6F7FE; /* primary text on dark */ /* Cosmic Violet — the brand identity color (indigo → violet). Heritage preserved: 900 = the original #372980, 700-region ≈ old #4a36ab. */ --violet-50: #F1EDFE; --violet-100: #E4DBFC; --violet-200: #CBBBF8; --violet-300: #AF97F1; --violet-400: #9576EA; --violet-500: #7C5CE6; /* brand primary (on dark) */ --violet-600: #6A48D6; /* brand primary (on light) */ --violet-700: #573BB0; --violet-800: #45308A; --violet-900: #372980; /* heritage deep */ --violet-950: #221A4D; /* ink (light-mode text) */ /* Starlight — the one luminous accent. Aqua-cyan; use sparingly. */ --star-50: #E6FBFA; --star-100: #C5F6F3; --star-200: #93EEE9; --star-300: #5FE3DC; /* accent (on dark) */ --star-400: #3ACFC8; --star-500: #22B3AD; --star-600: #17908C; /* accent text (on light) */ /* Sky — soft celestial blue. Lives in the logo gradient + quiet highlights. */ --sky-200: #BFD9FF; --sky-300: #8FC2FF; --sky-400: #5FA3FF; --sky-500: #3B82E6; /* Nebula — expressive magenta. Gradients only, never as a solid UI color. */ --nebula-300: #E28FCB; --nebula-400: #D46BB8; --nebula-500: #C2569E; --nebula-600: #A6407F; /* Signature gradients */ --gradient-brand: linear-gradient(135deg, var(--violet-900) 0%, var(--violet-600) 46%, var(--nebula-500) 100%); --gradient-brand-soft:linear-gradient(135deg, #2A2168 0%, #3A2C86 55%, #6E3A79 100%); --gradient-starlight: linear-gradient(120deg, var(--sky-400) 0%, var(--star-300) 100%); --gradient-aurora: radial-gradient(120% 120% at 20% 0%, rgba(124,92,230,0.28) 0%, rgba(95,163,255,0.10) 34%, transparent 62%); --gradient-text: linear-gradient(120deg, var(--starlight-white) 0%, var(--violet-200) 55%, var(--star-200) 100%); /* Semantic status hues (independent of the brand accent) */ --success-500: #3FBF8F; --warning-500: #E8B657; --danger-500: #E8606B; --info-500: #5FA3FF; } /* --------------------------------------------------------------------------- 2 · SEMANTIC TOKENS — DARK (default) --------------------------------------------------------------------------- */ :root { color-scheme: dark; --bg: var(--cosmos-950); --bg-void: var(--cosmos-1000); --bg-subtle: var(--cosmos-900); --surface: var(--cosmos-850); --surface-raised: var(--cosmos-800); --surface-overlay: var(--cosmos-750); --border: rgba(148, 148, 188, 0.14); --border-strong: rgba(148, 148, 188, 0.26); --border-brand: rgba(124, 92, 230, 0.55); --text: var(--starlight-white); --text-secondary: var(--cosmos-200); --text-muted: var(--cosmos-300); --text-subtle: var(--cosmos-400); --text-on-brand: #FFFFFF; --brand: var(--violet-500); --brand-hover: var(--violet-400); --brand-pressed: var(--violet-600); --brand-tint: rgba(124, 92, 230, 0.14); --accent: var(--star-300); --accent-hover: var(--star-200); --accent-tint: rgba(95, 227, 220, 0.12); --link: var(--star-300); --link-hover: var(--star-200); --focus-ring: rgba(95, 227, 220, 0.55); --success: var(--success-500); --success-tint: rgba(63, 191, 143, 0.14); --warning: var(--warning-500); --warning-tint: rgba(232, 182, 87, 0.14); --danger: var(--danger-500); --danger-tint: rgba(232, 96, 107, 0.14); --info: var(--info-500); --info-tint: rgba(95, 163, 255, 0.14); /* Elevation — on dark, depth is ambient shadow + optional glow */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.55); --shadow-lg: 0 28px 64px -20px rgba(0, 0, 0, 0.65); --glow-brand: 0 0 44px -10px rgba(124, 92, 230, 0.55); --glow-star: 0 0 30px -8px rgba(95, 227, 220, 0.50); } /* --------------------------------------------------------------------------- 2b · SEMANTIC TOKENS — LIGHT --------------------------------------------------------------------------- */ :root[data-theme="light"] { color-scheme: light; --bg: var(--cosmos-50); --bg-void: #FFFFFF; --bg-subtle: #FFFFFF; --surface: #FFFFFF; --surface-raised: #FFFFFF; --surface-overlay: #FFFFFF; --border: rgba(34, 26, 77, 0.12); --border-strong: rgba(34, 26, 77, 0.20); --border-brand: rgba(106, 72, 214, 0.45); --text: var(--violet-950); --text-secondary: #46436B; --text-muted: #61608A; --text-subtle: #8484A6; --text-on-brand: #FFFFFF; --brand: var(--violet-600); --brand-hover: var(--violet-700); --brand-pressed: var(--violet-800); --brand-tint: rgba(106, 72, 214, 0.10); --accent: var(--star-600); --accent-hover: var(--star-500); --accent-tint: rgba(23, 144, 140, 0.10); --link: var(--violet-600); --link-hover: var(--violet-700); --focus-ring: rgba(106, 72, 214, 0.45); --success-tint: rgba(63, 191, 143, 0.12); --warning-tint: rgba(232, 182, 87, 0.16); --danger-tint: rgba(232, 96, 107, 0.10); --info-tint: rgba(95, 163, 255, 0.12); --shadow-sm: 0 1px 2px rgba(34, 26, 77, 0.08); --shadow-md: 0 10px 28px -10px rgba(34, 26, 77, 0.16); --shadow-lg: 0 28px 64px -22px rgba(34, 26, 77, 0.20); --glow-brand: 0 10px 30px -12px rgba(106, 72, 214, 0.35); --glow-star: 0 10px 26px -12px rgba(23, 144, 140, 0.30); /* darker cosmic gradient so display text stays legible on light grounds */ --gradient-text: linear-gradient(120deg, var(--violet-700) 0%, var(--violet-500) 46%, var(--star-600) 100%); } /* --------------------------------------------------------------------------- 3 · TYPOGRAPHY TOKENS --------------------------------------------------------------------------- */ :root { --font-display: 'Syne', 'Space Grotesk', ui-sans-serif, system-ui, sans-serif; --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace; /* Fluid type scale — a modular third, tightened for display */ --text-display: clamp(2.75rem, 1.75rem + 4.6vw, 4.75rem); --text-h1: clamp(2.15rem, 1.60rem + 2.4vw, 3.25rem); --text-h2: clamp(1.70rem, 1.40rem + 1.4vw, 2.35rem); --text-h3: clamp(1.35rem, 1.22rem + 0.6vw, 1.62rem); --text-h4: 1.20rem; --text-body-lg: 1.15rem; --text-body: 1.00rem; --text-sm: 0.90rem; --text-xs: 0.80rem; --lh-tight: 1.04; --lh-snug: 1.16; --lh-normal: 1.5; --lh-relaxed:1.68; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-eyebrow: 0.16em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extra: 800; } /* --------------------------------------------------------------------------- 4 · SPACE · RADIUS · LAYOUT · MOTION (constant across themes) --------------------------------------------------------------------------- */ :root { /* 4px base spacing scale */ --space-px: 1px; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 22px; --radius-2xl: 30px; --radius-pill: 999px; --container: 1200px; --container-narrow: 820px; --container-wide: 1360px; --gutter: clamp(1.25rem, 4vw, 2.5rem); --section-y: clamp(4rem, 8vw, 8rem); --dur-fast: 120ms; --dur: 200ms; --dur-slow: 340ms; --dur-slower: 600ms; --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-emphasized: cubic-bezier(0.20, 0.80, 0.20, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); } /* ============================================================================= 5 · BASE / RESET (light-touch; drop-in ready for the overhaul) ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-relaxed); color: var(--text); background-color: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); text-wrap: balance; color: var(--text); } h1 { font-size: var(--text-h1); line-height: var(--lh-tight); } h2 { font-size: var(--text-h2); } h3 { font-size: var(--text-h3); letter-spacing: -0.01em; } h4 { font-size: var(--text-h4); letter-spacing: -0.01em; } p { line-height: var(--lh-relaxed); } p, li { max-width: 68ch; } /* keep running text readable */ a { color: var(--link); text-decoration: none; transition: color var(--dur) var(--ease-standard); } a:hover { color: var(--link-hover); } img, svg, video { display: block; max-width: 100%; height: auto; } ul, ol { list-style: none; padding: 0; } ::selection { background: var(--brand); color: #fff; } :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; border-radius: var(--radius-xs); } :focus:not(:focus-visible) { outline: none; } hr { border: none; border-top: 1px solid var(--border); } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } /* ============================================================================= 6 · PRIMITIVE COMPONENTS (starter set — extend in your page styles) ============================================================================= */ /* Layout helpers */ .ds-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .ds-container--narrow { max-width: var(--container-narrow); } .ds-container--wide { max-width: var(--container-wide); } .ds-section { padding-block: var(--section-y); } .ds-stack { display: flex; flex-direction: column; } /* Eyebrow / label */ .ds-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: var(--space-2); } .ds-eyebrow::before { content: ""; width: 1.5rem; height: 1px; background: currentColor; opacity: 0.6; } /* Gradient display text (use with restraint — one per view) */ .ds-text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Buttons -------------------------------------------------------------- */ .btn { --_pad-y: 0.72rem; --_pad-x: 1.4rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: 1; padding: var(--_pad-y) var(--_pad-x); border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard), background-color var(--dur) var(--ease-standard), border-color var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .btn--sm { --_pad-y: 0.5rem; --_pad-x: 1rem; font-size: var(--text-xs); } .btn--lg { --_pad-y: 0.95rem; --_pad-x: 1.9rem; font-size: var(--text-body); } .btn--primary { background-image: var(--gradient-brand); background-size: 140% 140%; background-position: 0% 50%; color: #fff; box-shadow: var(--shadow-md); transition: background-position var(--dur-slow) var(--ease-standard), transform var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard); } .btn--primary:hover { background-position: 100% 50%; box-shadow: var(--shadow-md), var(--glow-brand); } .btn--secondary { background: transparent; color: var(--accent); border-color: var(--border-strong); } .btn--secondary:hover { border-color: var(--accent); box-shadow: var(--glow-star); } .btn--ghost { background: transparent; color: var(--text-secondary); } .btn--ghost:hover { background: var(--brand-tint); color: var(--text); } /* Card ----------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease-standard), border-color var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard); } .card--interactive:hover { transform: translateY(-4px); border-color: var(--border-brand); box-shadow: var(--shadow-md); } /* Badge / pill --------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0.02em; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); background: var(--brand-tint); color: var(--brand); border: 1px solid var(--border); } .badge--accent { background: var(--accent-tint); color: var(--accent); } .badge--success { background: var(--success-tint); color: var(--success); } .badge--warning { background: var(--warning-tint); color: var(--warning); } .badge--danger { background: var(--danger-tint); color: var(--danger); } /* Input ---------------------------------------------------------------- */ .input { width: 100%; font-family: var(--font-body); font-size: var(--text-body); color: var(--text); background: var(--bg-subtle); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 0.75rem 1rem; transition: border-color var(--dur) var(--ease-standard), box-shadow var(--dur) var(--ease-standard); } .input::placeholder { color: var(--text-subtle); } .input:focus { outline: none; border-color: var(--border-brand); box-shadow: 0 0 0 3px var(--brand-tint); } /* Cosmic backdrop — refined starfield + one nebula glow. Apply to a section/hero wrapper; keep it to one per view. */ .ds-cosmos-bg { position: relative; background-color: var(--bg); background-image: var(--gradient-aurora), radial-gradient(1.5px 1.5px at 12% 22%, rgba(246,247,254,0.55), transparent 100%), radial-gradient(1.5px 1.5px at 78% 14%, rgba(191,217,255,0.50), transparent 100%), radial-gradient(1.2px 1.2px at 63% 62%, rgba(246,247,254,0.40), transparent 100%), radial-gradient(1.2px 1.2px at 32% 78%, rgba(147,238,233,0.40), transparent 100%), radial-gradient(1px 1px at 90% 82%, rgba(246,247,254,0.35), transparent 100%), radial-gradient(1px 1px at 45% 32%, rgba(246,247,254,0.30), transparent 100%); background-repeat: no-repeat; } :root[data-theme="light"] .ds-cosmos-bg { background-image: var(--gradient-aurora); /* stars off in light mode */ }