/* ============================================================================ sinnapps — DESIGN TOKENS ---------------------------------------------------------------------------- This is the ONE file to edit for colors, spacing, radius and type. Everything else reads from these custom properties. ========================================================================== */ :root { /* ---- Brand palette (from the sinnapps logo) --------------------------- */ --brand-blue: #4f7cf6; --brand-purple: #8b5cf6; --brand-pink: #ec4faa; --brand-coral: #ff7a59; --brand-green: #62c76a; --brand-yellow: #ffc23c; /* The signature rainbow — reused for borders, hovers, hero accents. */ --brand-gradient: linear-gradient( 100deg, var(--brand-blue) 0%, var(--brand-purple) 26%, var(--brand-pink) 50%, var(--brand-coral) 74%, var(--brand-green) 100% ); /* ---- Ink & surfaces --------------------------------------------------- */ --ink: #17171c; /* primary text, wordmark color */ --ink-soft: #3d3d46; /* body text */ --ink-muted: #797986; /* secondary/meta text */ --line: #e9e9f0; /* hairlines */ --line-strong: #d7d7e2; --bg: #f7f7fb; /* page background */ --surface: #ffffff; /* cards, panels */ --surface-2: #f2f2f8; /* subtle fills */ --success: #23a05a; /* ---- Radius (soft, friendly) ----------------------------------------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-pill: 999px; /* ---- Spacing scale ---------------------------------------------------- */ --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; /* ---- Typography ------------------------------------------------------- */ /* Editorial serif for display headings, clean grotesque for everything else. */ --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: var(--font-body); /* legacy alias */ /* ---- Header media ----------------------------------------------------- */ /* Drop a file at assets/img/header.jpg (or change this) to fill the hero band. Until then the brand gradient shows as a placeholder. */ --header-image: url("/assets/img/header.jpg"); /* ---- Elevation -------------------------------------------------------- */ --shadow-sm: 0 2px 8px rgba(23, 23, 28, 0.06); --shadow-md: 0 10px 30px rgba(23, 23, 28, 0.08); --shadow-lg: 0 24px 60px rgba(23, 23, 28, 0.12); /* ---- Layout ----------------------------------------------------------- */ --container: 1240px; --transition: 0.2s ease; } /* Optional dark mode — flip surfaces/ink. Enable by adding data-theme="dark" to . Brand palette stays identical. */ :root[data-theme="dark"] { --ink: #f5f5fa; --ink-soft: #d3d3de; --ink-muted: #9a9aa8; --line: #2a2a34; --line-strong: #3a3a46; --bg: #121218; --surface: #1c1c24; --surface-2: #24242e; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4); --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); }