/* ============================================================ MEGA KERATIN — DESIGN TOKENS Built by Claude Design from the Mega Keratin Brandbook. Layer 1: Primitives (raw brand values) Layer 2: Semantic tokens (intent-based aliases) ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"); :root { /* ---------------------------------------------------------- 1 · PRIMITIVE COLOR — straight from the brandbook ---------------------------------------------------------- */ --mk-purple: #6709F9; /* "Blue" swatch — electric violet, primary brand */ --mk-purple-deep: #6709A9; /* deeper violet used in background blends */ --mk-pink: #F604EE; /* core magenta */ --mk-pink-bright: #F10AEF; /* gradient pink */ --mk-pink-media: #FA23BC; /* social / media pink */ --mk-ink: #1B1B1B; /* brand black */ --mk-white: #FFFFFF; /* Neutral ink ramp (derived from #1B1B1B for real UI surfaces) */ --ink-950: #0C0C0D; --ink-900: #111112; --ink-800: #161617; --ink-700: #1B1B1B; /* brand black */ --ink-600: #242425; --ink-500: #2F2F31; --ink-400: #3C3C3F; --ink-300: #565659; --ink-200: #8A8A8E; --ink-100: #C7C7CC; --ink-050: #ECECEE; /* Alpha whites for text & lines on dark surfaces */ --white-92: rgba(255,255,255,.92); --white-70: rgba(255,255,255,.70); --white-50: rgba(255,255,255,.50); --white-32: rgba(255,255,255,.32); --white-14: rgba(255,255,255,.14); --white-08: rgba(255,255,255,.08); --white-04: rgba(255,255,255,.04); /* Brand tints (magenta / violet washes for soft fills) */ --pink-tint-16: rgba(246,4,238,.16); --pink-tint-10: rgba(246,4,238,.10); --purple-tint-16: rgba(103,9,249,.16); --purple-tint-10: rgba(103,9,249,.10); /* Status palette — tuned to read as premium on dark ink */ --status-success: #1FD1A0; --status-warning: #FFB020; --status-danger: #FF4D6D; --status-info: var(--mk-purple); /* ---------------------------------------------------------- 2 · GRADIENTS ---------------------------------------------------------- */ --grad-brand: linear-gradient(120deg, var(--mk-pink) 0%, var(--mk-purple) 100%); /* Deepened brand gradient for white text on interactive surfaces — both stops clear WCAG AA (≥4.5:1) while keeping the magenta→violet identity */ --grad-brand-cta: linear-gradient(rgba(15,2,20,.30), rgba(15,2,20,.30)), linear-gradient(120deg, var(--mk-pink) 0%, var(--mk-purple) 100%); --grad-pink: linear-gradient(120deg, var(--mk-pink-bright) 0%, var(--mk-pink-media) 100%); --grad-violet: linear-gradient(160deg, var(--mk-purple) 0%, var(--mk-purple-deep) 100%); /* Approved background blends from the brandbook */ --grad-bg-violet-ink: linear-gradient(150deg, var(--mk-purple-deep) 0%, var(--mk-ink) 70%); --grad-bg-pink-ink: linear-gradient(150deg, var(--mk-pink) 0%, var(--mk-ink) 75%); --grad-bg-pink-violet:linear-gradient(150deg, var(--mk-pink) 0%, var(--mk-purple-deep) 100%); /* Ambient page veil */ --grad-veil: radial-gradient(1200px 600px at 80% -10%, rgba(103,9,249,.18), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(246,4,238,.14), transparent 55%); /* ---------------------------------------------------------- 3 · TYPOGRAPHY ---------------------------------------------------------- */ --font-primary: "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; /* Cruinn is the brand accent face; graceful fallbacks until licensed/loaded */ --font-accent: "Cruinn", "Montserrat", "Optima", "Avenir Next", system-ui, sans-serif; --font-mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace; /* Type scale — anchored to the brandbook's 109 / 40 / 16 px specimens */ --fs-display: clamp(2.75rem, 1.2rem + 6vw, 4.75rem); /* up to ~76px */ --fs-h1: 3rem; /* 48 */ --fs-h2: 2.25rem; /* 36 */ --fs-h3: 1.75rem; /* 28 */ --fs-h4: 1.375rem; /* 22 */ --fs-lead: 1.125rem; /* 18 */ --fs-body: 1rem; /* 16 */ --fs-sm: 0.875rem; /* 14 */ --fs-xs: 0.75rem; /* 12 */ --fw-thin: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; /* eyebrows / caps labels */ --tracking-wider: 0.18em; /* logo-style spacing */ /* ---------------------------------------------------------- 4 · SPACING — 4px base grid ---------------------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ /* ---------------------------------------------------------- 5 · RADIUS ---------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --radius-circle: 50%; /* ---------------------------------------------------------- 6 · BORDERS ---------------------------------------------------------- */ --border-thin: 1px; --border: 1.5px; --border-thick: 2px; --border-subtle: var(--white-08); --border-default: var(--white-14); --border-strong: var(--white-32); /* ---------------------------------------------------------- 7 · ELEVATION — shadows + brand glows (dark UI) ---------------------------------------------------------- */ --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 6px 18px rgba(0,0,0,.45); --shadow-3: 0 16px 38px rgba(0,0,0,.55); --shadow-4: 0 28px 64px rgba(0,0,0,.62); --glow-pink: 0 0 32px rgba(246,4,238,.45); --glow-purple: 0 0 32px rgba(103,9,249,.45); --glow-brand: 0 10px 36px rgba(246,4,238,.28), 0 10px 36px rgba(103,9,249,.24); /* ---------------------------------------------------------- 8 · MOTION ---------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); /* ---------------------------------------------------------- 9 · LAYOUT ---------------------------------------------------------- */ --container: 1120px; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-overlay: 1000; --z-toast: 1100; /* ---------------------------------------------------------- 10 · SEMANTIC ALIASES — what the rest of the system uses ---------------------------------------------------------- */ --color-bg: var(--ink-950); --color-surface: var(--ink-800); --color-surface-raised: var(--ink-700); --color-surface-sunken: var(--ink-900); --color-border: var(--border-default); --color-border-subtle: var(--border-subtle); --color-text: var(--white-92); --color-text-secondary: var(--white-70); --color-text-muted: var(--white-50); --color-text-on-brand: var(--mk-white); --color-brand: var(--mk-pink); --color-brand-alt: var(--mk-purple); --color-focus: var(--mk-pink); --color-link: #C79BFF; }