/* ============================================================================ Author: N1CHO Made for LynxLayers ============================================================================ */ /* ============================================================================ LynxThemeN1CHO - Design Tokens (brand-matched to lynxlayers.me) ---------------------------------------------------------------------------- Palette/fonts/radius/glow lifted from lynxlayers.me: dark, cyan-on-near-black. Theming model: semantic CSS custom properties. - DARK is the DEFAULT (matches the live brand site) and is declared on :root, so it applies with NO JavaScript on first load. - `.theme-light` on overrides to the derived light variant (the root-class toggle). `.theme-dark` re-asserts dark. - A new variant = one `.theme-x { ... }` block re-declaring tokens. No refactor. Plain inherited custom properties (not light-dark()) so EVERY element, including third-party/Bootstrap subtrees, gets the right value. All fg/bg + UI pairs verified WCAG AA (~/lynxlayers-devtools/check-contrast.mjs). ============================================================================ */ :root { color-scheme: dark; /* ---- Typography (remake: Bricolage Grotesque display + Inter body + JetBrains Mono specs) ---- */ --font-display: "Bricolage Grotesque", "Space Grotesk", "Inter", system-ui, sans-serif; --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --text-xs: 0.78rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 1.85rem; --text-3xl: 2.4rem; --text-4xl: 3.25rem; --leading-tight: 1.15; --leading-normal: 1.6; --measure: 68ch; /* ---- Shape / elevation / motion (brand radii + cyan glow) ---- */ --radius-sm: 10px; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(2, 6, 12, 0.30); --shadow-md: 0 10px 30px -12px rgba(2, 6, 12, 0.55), 0 2px 6px rgba(2, 6, 12, 0.30); --shadow-lg: 0 24px 60px -18px rgba(2, 6, 12, 0.65), 0 6px 16px rgba(2, 6, 12, 0.40); --shadow-glow: 0 0 0 1px rgba(34, 211, 238, 0.18), 0 12px 40px -12px rgba(34, 211, 238, 0.45); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 130ms; --dur: 200ms; --dur-slow: 320ms; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; --space-12: 5rem; /* ---- DARK tokens (brand default) ---- */ --bg-base: #07090f; --bg-surface: #0f1622; --bg-muted: #131c2b; --bg-elevated: #131c2b; --bg-inset: #0b1018; --text-primary: #e6edf5; --text-secondary: #aebccd; --text-muted: #8a99ac; --text-on-primary: #04121a; --primary-color: #22d3ee; --primary-hover: #67e8f9; --primary-strong: #67e8f9; --primary-soft: rgba(34, 211, 238, 0.12); --border-color: rgba(255, 255, 255, 0.08); --border-strong: #52647d; --nav-bg: rgba(7, 9, 15, 0.65); /* exact lynxlayers.me .nav background */ --focus-ring: #22d3ee; --color-success: #4ade80; --color-danger: #f87171; --color-warning: #fbbf24; --color-info: #60a5fa; } /* ---- Derived LIGHT variant (root-class toggle) ---- */ .theme-light { color-scheme: light; --bg-base: #eef2f7; --bg-surface: #fbfdff; --bg-muted: #e6edf5; --bg-elevated: #ffffff; --bg-inset: #e3eaf2; --text-primary: #0d1420; --text-secondary: #3c4e63; --text-muted: #566b80; --text-on-primary: #ffffff; --primary-color: #0e7490; --primary-hover: #0891b2; --primary-strong: #0e7490; --primary-soft: #d6f3f9; --border-color: #d8e2ec; --border-strong: #6e7d90; --nav-bg: rgba(238, 242, 247, 0.72); /* frosted light-mode nav */ --focus-ring: #0e7490; --color-success: #15803d; --color-danger: #b91c1c; --color-warning: #a16207; --color-info: #1d4ed8; } .theme-dark { color-scheme: dark; }