/* ========================================================================== NEXUS RYDS TECH — Design Tokens · "Connected Momentum" Single source of truth. Every component reads from these properties. Layout concept: dark navy "night sky" canvas, glass layers floating above it, one light Cloud band for the products section. ========================================================================== */ :root { color-scheme: dark; /* ---- 1. Brand colors (core palette) ---------------------------------- */ --nx-navy: #07101D; /* Nexus Navy — foundation */ --nx-gold: #E5BF78; /* Momentum Gold — primary accent, key actions */ --nx-mint: #9DDED9; /* Signal Mint — focus, secondary highlights */ --nx-cloud: #E9ECE6; /* Cloud — light surfaces, products */ /* ---- Supporting palette (derived) ------------------------------------ */ --nx-navy-900: #050B15; /* deepest shade, footer */ --nx-navy-800: #0B1728; /* raised dark surface */ --nx-navy-700: #12233A; /* card on dark */ --nx-navy-600: #1C3150; /* dividers, inactive */ --nx-slate-300: #A9B4C2; /* muted text on navy (8.9:1) */ --nx-slate-400: #7E8A9B; /* tertiary text on navy (5.4:1) */ --nx-gold-300: #F0D5A2; /* gold hover */ --nx-gold-600: #C9A05A; /* gold pressed */ --nx-gold-ink: #7A5716; /* gold as text on Cloud (5.6:1) */ --nx-mint-300: #C4ECE9; --nx-mint-ink: #1E6B66; /* mint as text on Cloud (5.5:1) */ --nx-cloud-50: #F6F7F3; /* product card */ --nx-cloud-200: #D8DDD5; /* product border */ --nx-ink: #0E1A2B; /* body text on Cloud (15:1) */ --nx-ink-muted: #4A5768; /* muted text on Cloud (7:1) */ /* ---- Semantic colors -------------------------------------------------- */ --color-bg: var(--nx-navy); --color-bg-raised: var(--nx-navy-800); --color-text: #F2F4F0; --color-text-muted: var(--nx-slate-300); --color-text-subtle: var(--nx-slate-400); --color-accent: var(--nx-gold); --color-accent-hover: var(--nx-gold-300); --color-accent-pressed: var(--nx-gold-600); --color-on-accent: var(--nx-navy); --color-highlight: var(--nx-mint); --color-focus: var(--nx-mint); --color-border: rgba(233, 236, 230, 0.10); --color-border-strong: rgba(233, 236, 230, 0.20); --color-border-accent: rgba(229, 191, 120, 0.45); --color-success: #8FD9A8; --color-warning: #F2C46D; --color-danger: #F29A8B; --color-info: var(--nx-mint); /* ---- 2. Typography ---------------------------------------------------- */ --font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* Fluid scale (min @ 360px → max @ 1440px), ratio ≈ 1.25 */ --text-xs: 0.75rem; /* 12 labels */ --text-sm: 0.875rem; /* 14 meta */ --text-base: 1rem; /* 16 body */ --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);/* 17–19 lead */ --text-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); /* 20–24 h4 */ --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 24–32 h3 */ --text-2xl: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); /* 32–52 h2 */ --text-3xl: clamp(2.6rem, 1.6rem + 4.4vw, 5.25rem); /* 42–84 hero */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; --weight-extra: 800; --leading-tight: 1.05; --leading-snug: 1.2; --leading-body: 1.6; --tracking-tight: -0.035em; --tracking-label: 0.14em; --measure: 62ch; /* ---- 3. Spacing (4px base) ------------------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem); /* ---- 4. Layout & grid ------------------------------------------------- */ /* Breakpoints (use in media queries — custom properties can't be read there): sm 600px · md 900px · lg 1200px · xl 1440px */ --container: 1200px; --container-wide: 1320px; --gutter: max(16px, env(safe-area-inset-left, 0px)); --grid-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem); --header-h: 72px; /* ---- 5. Radius & borders --------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; --border-hair: 1px solid var(--color-border); --border-strong: 1px solid var(--color-border-strong); /* ---- 6. Glass surfaces & shadows ------------------------------------- */ --glass-1: linear-gradient(155deg, rgba(233,236,230,0.07), rgba(233,236,230,0.02)); --glass-2: linear-gradient(155deg, rgba(233,236,230,0.11), rgba(233,236,230,0.035)); --glass-gold: linear-gradient(155deg, rgba(229,191,120,0.16), rgba(229,191,120,0.03)); --glass-blur: blur(18px) saturate(140%); --glass-edge: inset 0 1px 0 rgba(255,255,255,0.08); /* top light catch */ --shadow-sm: 0 2px 8px rgba(2, 6, 14, 0.35); --shadow-md: 0 12px 32px -8px rgba(2, 6, 14, 0.55); --shadow-lg: 0 30px 80px -20px rgba(2, 6, 14, 0.7); --shadow-gold-glow: 0 10px 40px -10px rgba(229, 191, 120, 0.55); --shadow-light: 0 18px 50px -24px rgba(14, 26, 43, 0.35); /* on Cloud */ /* Ambient light */ --glow-gold: radial-gradient(closest-side, rgba(229,191,120,0.22), transparent); --glow-mint: radial-gradient(closest-side, rgba(157,222,217,0.16), transparent); /* ---- 12. Motion ------------------------------------------------------- */ --dur-instant: 90ms; /* press feedback */ --dur-fast: 160ms; /* hover, color */ --dur-base: 260ms; /* menus, modals */ --dur-slow: 520ms; /* section reveals */ --dur-ambient: 40s; /* orbit rotation */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* "momentum" — arrives softly */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* small overshoot, sparingly */ /* ---- Layers ----------------------------------------------------------- */ --z-base: 1; --z-header: 50; --z-menu: 60; --z-modal: 100; --z-toast: 110; } /* ---- 13. Reduced motion: collapse all durations ------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }