/* ============================================================= Limitless Performance Portal — Design tokens ---------------------------------------------------------------- Source of truth for every visual decision. Pair with base.css, layout.css, components.css, site.css. Dark mode is driven by [data-theme="dark"] on ; the theme-toggle.js handles it. ============================================================= */ :root { /* ---- Brand (Limitless vibrant red) ---- */ --brand: #E10600; --brand-hover: #B80500; --brand-active: #8F0300; --brand-tint-12: rgba(225, 6, 0, 0.12); --brand-tint-20: rgba(225, 6, 0, 0.20); /* ---- Surfaces (light) ---- */ --color-bg: #FFFFFF; --color-surface: #FAFAFB; --color-surface-2: #F2F2F5; --color-surface-3: #E5E5EA; --color-overlay: rgba(11, 11, 14, 0.5); /* ---- Text (light) ---- */ --color-text: #0B0B0E; --color-text-soft: #2A2A32; --color-muted: #646471; --color-placeholder: #9898A5; --color-on-primary: #ffffff; --color-on-dark: #ffffff; /* ---- Borders (light) ---- */ --color-border: #E5E5EA; --color-border-strong: #CFCFD6; --color-divider: #EEEEF2; /* ---- Semantic (light) ---- */ --color-primary: #E10600; --color-primary-hover: #B80500; --color-primary-soft: #FFE5E3; --color-primary-tint: rgba(225, 6, 0, 0.12); --color-success: #11a573; --color-success-tint: rgba(17, 165, 115, 0.12); --color-warning: #d68a00; --color-warning-tint: rgba(214, 138, 0, 0.14); --color-danger: #d63246; --color-danger-tint: rgba(214, 50, 70, 0.12); --color-info: #2f80ed; --color-info-tint: rgba(47, 128, 237, 0.12); --color-neutral: #6b7280; --color-neutral-tint: rgba(107, 114, 128, 0.12); /* ---- Typography ---- */ --font-sans: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-display: "Oswald", "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace; --fs-xs: 0.7188rem; /* 11.5 */ --fs-sm: 0.8125rem; /* 13 */ --fs-base: 1rem; /* 15 */ --fs-lg: 1.0625rem; /* 17 */ --fs-h6: 0.9375rem; /* 15 */ --fs-h5: 1.0625rem; /* 17 */ --fs-h4: 1.25rem; /* 20 */ --fs-h3: 1.5rem; /* 24 */ --fs-h2: 1.75rem; /* 28 */ --fs-h1: 2.125rem; /* 34 */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.55; --lh-relaxed: 1.7; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* ---- Spacing (4 px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* ---- Radius ---- */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ---- Shadows (light) ---- */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.04); --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, 0.16), 0 4px 8px rgba(16, 24, 40, 0.06); --shadow-focus: 0 0 0 4px rgba(225, 6, 0, 0.22); --shadow-inner: inset 0 1px 2px rgba(16, 24, 40, 0.06); /* ---- Breakpoints (for reference / JS only) ---- */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ---- Z-index ---- */ --z-base: 0; --z-sticky: 100; --z-topbar: 300; --z-drawer: 400; --z-dropdown: 500; --z-modal: 600; --z-toast: 700; --z-tooltip: 800; --z-preloader: 900; /* ---- Motion ---- */ --dur-fast: 150ms; --dur-normal: 250ms; --dur-slow: 400ms; --dur-reveal: 450ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-emphasis: cubic-bezier(0.3, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* ---- Layout ---- */ --topbar-h: 56px; --sidebar-w: 260px; --sidebar-w-collapsed: 72px; --content-max: 1320px; --content-pad: var(--sp-4); /* ---- Focus ring helper ---- */ --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); /* ---- Site-specific (public marketing site) ---- */ --site-hero-bg: linear-gradient(135deg, #08080B 0%, #15151C 60%, #2A0A0A 100%); --site-accent-glow: 0 0 40px rgba(225, 6, 0, 0.35); --site-grid-overlay: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0); color-scheme: light; } @media (min-width: 1024px) { :root { --topbar-h: 64px; --content-pad: var(--sp-5); } } /* ============================================================= Dark mode ============================================================= */ [data-theme="dark"] { --color-bg: #0A0A0C; --color-surface: #131317; --color-surface-2: #1C1C22; --color-surface-3: #24242C; --color-overlay: rgba(0, 0, 0, 0.65); --color-text: #F4F4F6; --color-text-soft: #D6D6DC; --color-muted: #9B9BA6; --color-placeholder: #5E5E6A; --color-on-primary: #ffffff; --color-border: #24242C; --color-border-strong: #33333D; --color-divider: #1E1E24; --color-primary: #FF1A14; --color-primary-hover: #FF4A40; --color-primary-soft: rgba(255, 26, 20, 0.16); --color-primary-tint: rgba(255, 26, 20, 0.16); --color-success: #2dd39e; --color-success-tint: rgba(45, 211, 158, 0.16); --color-warning: #f1b64a; --color-warning-tint: rgba(241, 182, 74, 0.18); --color-danger: #ff6b82; --color-danger-tint: rgba(255, 107, 130, 0.16); --color-info: #5aa2ff; --color-info-tint: rgba(90, 162, 255, 0.16); --color-neutral: #9B9BA6; --color-neutral-tint: rgba(155, 155, 166, 0.16); --brand: #FF1A14; --brand-hover: #FF4A40; --brand-active: #E10600; --brand-tint-12: rgba(255, 26, 20, 0.16); --brand-tint-20: rgba(255, 26, 20, 0.28); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.03); --shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-lg: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4); --shadow-focus: 0 0 0 4px rgba(255, 26, 20, 0.32); --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.35); --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary); --site-hero-bg: linear-gradient(135deg, #06060A 0%, #121219 55%, #2D0807 100%); --site-accent-glow: 0 0 60px rgba(255, 26, 20, 0.42); --site-grid-overlay: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.08) 1px, transparent 0); color-scheme: dark; } /* ============================================================= Reduced motion ============================================================= */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0.01ms; --dur-normal: 0.01ms; --dur-slow: 0.01ms; --dur-reveal: 0.01ms; } }