/* ============================================ Design Tokens מקור: חולץ ישירות מ-CSS של solugen.ai ============================================ */ :root { /* ===== Brand colors ===== */ --ink-900: #101931; /* SoluGen primary navy */ --ink-800: #0A1428; --ink-700: #0A2456; /* Tmura primary navy */ --mint-500: #16D9A8; /* SoluGen signature accent */ --mint-300: rgba(22, 217, 168, 0.3); --mint-100: rgba(22, 217, 168, 0.12); --blue-500: #2364E2; /* SoluGen electric blue */ --blue-300: #155EF9; /* Tmura active blue */ --purple-500: #9048D8; /* Subtle purple accent */ --amber-500: #F59E0B; /* Warm action color (ch3) */ --rose-500: #E11D48; /* Concrete output color (ch4) */ --surface-0: #FFFFFF; --surface-50: #EFF2F9; /* Light page background */ --surface-100: #E2E8F0; --slate-300: #B4BDD4; /* Borders, dividers */ --slate-500: #6B7A90; /* Body text muted */ --slate-700: rgba(16, 25, 49, 0.7); /* ===== Semantic neutrals ===== */ --border-soft: rgba(16, 25, 49, 0.06); --border-mid: rgba(16, 25, 49, 0.12); --overlay-04: rgba(16, 25, 49, 0.04); --overlay-08: rgba(16, 25, 49, 0.08); /* ===== Shadows ===== */ --shadow-soft: 0 8px 32px rgba(16, 25, 49, 0.08); --shadow-medium: 0 16px 48px rgba(16, 25, 49, 0.12); --shadow-strong: 0 24px 64px rgba(16, 25, 49, 0.18); /* ===== Typography ===== */ --font-display: 'Rubik', 'Space Grotesk', system-ui, sans-serif; --font-body: 'Heebo', 'Inter', system-ui, sans-serif; --text-hero: clamp(2.75rem, 5.5vw, 4.5rem); --text-h1: clamp(2rem, 3.6vw, 2.75rem); --text-h2: clamp(1.25rem, 2.1vw, 1.75rem); --text-h3: 1.25rem; --text-body: 1rem; --text-small: 0.875rem; --text-micro: 0.75rem; /* ===== Spacing ===== */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; /* ===== Radii ===== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px; /* ===== Motion ===== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --duration-fast: 180ms; --duration-medium: 280ms; --duration-slow: 480ms; /* ===== Chapter accent (overridden per chapter) ===== */ --chapter-accent: var(--mint-500); --chapter-tint: var(--mint-100); --chapter-ink: var(--ink-900); } /* ===== Chapter theming via data-chapter attribute ===== Applied to (cascades everywhere) AND optionally to the slide root. */ /* Each chapter gets a distinct hue so the progress bar and chrome read clearly. 0/1/5 used to all be mint, 2/4 used to be similar blues — fixed here. */ [data-chapter="0"] { --chapter-accent: var(--mint-500); --chapter-tint: rgba(22,217,168,0.12); } /* mint — opening */ [data-chapter="1"] { --chapter-accent: var(--blue-500); --chapter-tint: rgba(35,100,226,0.10); } /* blue — analytical */ [data-chapter="2"] { --chapter-accent: var(--purple-500); --chapter-tint: rgba(144,72,216,0.10); } /* purple — vision */ [data-chapter="3"] { --chapter-accent: var(--amber-500); --chapter-tint: rgba(245,158,11,0.10); } /* amber — action */ [data-chapter="4"] { --chapter-accent: var(--rose-500); --chapter-tint: rgba(225,29,72,0.08); } /* rose — concrete output */ [data-chapter="5"] { --chapter-accent: var(--slate-500); --chapter-tint: rgba(107,122,144,0.12); } /* slate — settled close */