/* ===================================================================== SysthetIQ Design System — CSS Custom Properties --------------------------------------------------------------------- Source of truth: systhetiq.tokens.json v1.2.0 — © HIGHERPlan GmbH USAGE: 1. Import once per site: 2. Set brand on element: 3. Use variables: color: var(--brand-500); box-shadow: var(--glow-soft); ===================================================================== */ :root { /* ─── SURFACES (universal across all subbrands) ─────────────────── */ --color-void: #050608; --color-canvas: #0A0C10; --color-graphite: #12151B; --color-surface: #181C24; --color-surface-raised: #1F2530; --color-surface-inset: #0F1219; /* ─── BORDERS ───────────────────────────────────────────────────── */ --border-faint: rgba(255, 255, 255, 0.04); --border-subtle: rgba(255, 255, 255, 0.08); --border-default: rgba(255, 255, 255, 0.12); --border-strong: rgba(255, 255, 255, 0.20); /* ─── TEXT ──────────────────────────────────────────────────────── */ --text-primary: #F5F7FA; --text-secondary: #B4BCC9; --text-tertiary: #7A8494; --text-muted: #4A5260; --text-inverse: #0A0C10; /* ─── SEMANTIC ──────────────────────────────────────────────────── */ --color-success: #10B981; --color-warning: #F59E0B; --color-danger: #EF4444; /* ─── TYPOGRAPHY ────────────────────────────────────────────────── */ --font-display: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-body: 'Geist', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'Cascadia Code', monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem; --fs-3xl: 1.875rem; --fs-4xl: 2.25rem; --fs-5xl: 3rem; --fs-6xl: 3.75rem; --fs-7xl: 4.5rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-display: -0.03em; --tracking-heading: -0.015em; --tracking-body: 0em; --tracking-label: 0.06em; --tracking-wide: 0.12em; /* ─── SPACING (8px baseline) ────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --space-11: 192px; /* ─── RADIUS ────────────────────────────────────────────────────── */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-full: 9999px; /* ─── SHADOWS ───────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.35); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6), 0 8px 16px rgba(0, 0, 0, 0.4); /* ─── GLOW (resolves against active brand) ──────────────────────── */ --glow-soft: 0 0 24px rgba(var(--brand-glow-rgb), 0.20); --glow-medium: 0 0 40px rgba(var(--brand-glow-rgb), 0.25); --glow-strong: 0 0 60px rgba(var(--brand-glow-rgb), 0.30); --glow-focus-ring: 0 0 0 3px rgba(var(--brand-glow-rgb), 0.35); /* ─── MOTION ────────────────────────────────────────────────────── */ --duration-instant: 80ms; --duration-fast: 160ms; --duration-base: 240ms; --duration-slow: 400ms; --duration-ambient: 800ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); /* ─── LAYOUT ────────────────────────────────────────────────────── */ --max-prose: 640px; --max-content: 1024px; --max-container: 1280px; --max-wide: 1440px; --grid-gutter: 24px; --grid-baseline: 8px; /* ─── Z-INDEX ───────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 1100; --z-tooltip: 1200; /* ─── BLUR ──────────────────────────────────────────────────────── */ --blur-sm: 8px; --blur-md: 16px; --blur-lg: 24px; } /* ===================================================================== BRAND ACCENTS Switch via — all brand-* and glow tokens resolve to the chosen subbrand automatically. ===================================================================== */ /* INTELLIGENCE — Calm Teal (live mother-brand, default fallback) */ :root, [data-brand="intelligence"] { --brand-50: #F0FDFA; --brand-100: #CCFBF1; --brand-200: #99F6E4; --brand-300: #5EEAD4; --brand-400: #67E8D6; --brand-500: #2DD4BF; --brand-600: #14B8A6; --brand-700: #0D9488; --brand-800: #0F766E; --brand-900: #115E59; --brand-primary: var(--brand-500); --brand-glow-rgb: 45, 212, 191; } /* ADVISOR — Electric Blue (extracted from live systhetiq-advisor.com) */ [data-brand="advisor"] { --brand-50: #EBF0FE; --brand-100: #C5D2FA; --brand-200: #94ABF2; --brand-300: #6F92F0; --brand-400: #4F7DEA; --brand-500: #2D6BE0; --brand-600: #1F58C7; --brand-700: #1846A8; --brand-800: #133589; --brand-900: #0E255F; --brand-primary: var(--brand-500); --brand-glow-rgb: 45, 107, 224; } /* BUILD — Lavender Violet (live sub-brand) */ [data-brand="build"] { --brand-50: #F5F3FF; --brand-100: #EDE9FE; --brand-200: #DDD6FE; --brand-300: #C4B5FD; --brand-400: #BDA6FB; --brand-500: #A78BFA; --brand-600: #8B5CF6; --brand-700: #7C3AED; --brand-800: #6D28D9; --brand-900: #5B21B6; --brand-primary: var(--brand-500); --brand-glow-rgb: 167, 139, 250; } /* STUDIO — Cinematic Crimson with magenta undertone */ [data-brand="studio"] { --brand-50: #FBE7EF; --brand-100: #F4BBD3; --brand-200: #EC85AE; --brand-300: #E34F88; --brand-400: #D72563; --brand-500: #B81348; --brand-600: #960C39; --brand-700: #74082B; --brand-800: #52051E; --brand-900: #2F0311; --brand-primary: var(--brand-500); --brand-glow-rgb: 184, 19, 72; } /* STUDIO PRO — Vibrant Pink (sister to Studio, lighter sibling) */ [data-brand="studio-pro"] { --brand-50: #FDF2F8; --brand-100: #FCE7F3; --brand-200: #FBCFE8; --brand-300: #F9A8D4; --brand-400: #F687C8; --brand-500: #F471B5; --brand-600: #DB4F95; --brand-700: #BE2D7A; --brand-800: #9D1B61; --brand-900: #701A47; --brand-primary: var(--brand-500); --brand-glow-rgb: 244, 113, 181; } /* ===================================================================== BASELINE ===================================================================== */ html { background: var(--color-canvas); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { margin: 0; } ::selection { background: var(--brand-500); color: var(--text-inverse); } *:focus-visible { outline: none; box-shadow: var(--glow-focus-ring); border-radius: var(--radius-sm); }