/* ───────────────────────────────────────────────────────────── Mahana Mastermind — Design Tokens Import this file as-is. Everything is CSS variables on :root. Semantic classes for type/button/surface are defined below. ───────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ── Brand gradient stops ───────────────────────────────── */ /* sampled from tall-mahana-bg-grade-01.png, clockwise */ --mahana-grad-1: #FFB359; /* soft apricot (top-right) */ --mahana-grad-2: #FF7A8A; /* coral pink (top-left) */ --mahana-grad-3: #E86CC7; /* magenta (mid) */ --mahana-grad-4: #8B7BFF; /* periwinkle (bottom-right) */ --mahana-grad-5: #6FD8FF; /* sky cyan (bottom-left) */ --mahana-gradient: linear-gradient(155deg, var(--mahana-grad-1) 0%, var(--mahana-grad-2) 25%, var(--mahana-grad-3) 50%, var(--mahana-grad-4) 78%, var(--mahana-grad-5) 100%); --mahana-gradient-soft: linear-gradient(155deg, rgba(255,179,89,0.18), rgba(255,122,138,0.18) 25%, rgba(232,108,199,0.18) 50%, rgba(139,123,255,0.18) 78%, rgba(111,216,255,0.18)); /* ── Primary accent (from the gradient, used solo) ──────── */ --brand-primary: #E86CC7; /* signature magenta */ --brand-primary-ink: #B53D98; --brand-accent: #8B7BFF; --brand-cyan: #6FD8FF; --brand-orange: #FFB359; --brand-coral: #FF7A8A; /* ── Paper / surface (the "ecru" Mahana base) ───────────── */ --paper-base: #F8F5F2; /* desktop window canvas */ --paper-tint: #FBF8F5; /* mobile / softer canvas */ --paper-card: #FFFFFF; /* raised card on paper */ --paper-sub: rgba(0,0,0,0.03); --paper-hover: rgba(0,0,0,0.04); --paper-active: rgba(0,0,0,0.06); /* ── Ink (foreground / text) ────────────────────────────── */ --ink-1: #1A1A1A; /* primary text */ --ink-2: rgba(0,0,0,0.82); --ink-3: rgba(0,0,0,0.70); /* secondary */ --ink-4: rgba(0,0,0,0.55); /* tertiary, icons */ --ink-5: rgba(0,0,0,0.45); /* placeholder, metadata */ --ink-6: rgba(0,0,0,0.35); /* hint, timestamps */ --ink-7: rgba(0,0,0,0.25); /* dividers */ /* ── Hairlines ──────────────────────────────────────────── */ --line-1: rgba(0,0,0,0.05); /* soft divider */ --line-2: rgba(0,0,0,0.08); /* standard border */ --line-3: rgba(0,0,0,0.12); /* emphasized */ /* ── Dark "ink" mode (voice-call, artifact code) ────────── */ --ink-bg: #0F0D16; /* deep plum-black */ --ink-bg-2: #14101F; /* slightly lifted */ --ink-fg-1: #FFFFFF; --ink-fg-2: #E5E2F0; --ink-fg-3: rgba(255,255,255,0.75); --ink-fg-4: rgba(255,255,255,0.55); --ink-line: rgba(255,255,255,0.08); /* ── Model-brand tints (per vendor) ─────────────────────── */ --model-anthropic-fg: #D97757; --model-anthropic-bg: #FAF2EC; --model-openai-fg: #10A37F; --model-openai-bg: #EFF8F4; --model-gemini-fg: #4B8BF5; --model-gemini-bg: #EEF3FD; --model-xai-fg: #111111; --model-xai-bg: #F1F1F1; --model-qwen-fg: #615CED; --model-qwen-bg: #EEEDFD; --model-deepseek-fg: #4D6BFE; --model-deepseek-bg: #ECEFFF; --model-kimi-fg: #111111; --model-kimi-bg: #EDEDED; --model-meta-fg: #0668E1; --model-meta-bg: #E8F0FD; --model-bfl-fg: #111111; --model-bfl-bg: #EDEDED; --model-minimax-fg: #F25A38; --model-minimax-bg: #FCEEEA; /* ── Semantic ───────────────────────────────────────────── */ --semantic-success: #28C840; --semantic-warning: #FEBC2E; --semantic-danger: #FF5F57; --semantic-info: var(--brand-cyan); /* ── Typography families ────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif; --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* ── Type scale (display sizes run SERIF, body runs SANS) ─ */ --fs-display-1: 56px; --lh-display-1: 1.05; --fs-display-2: 40px; --lh-display-2: 1.1; --fs-h1: 28px; --lh-h1: 1.2; --fs-h2: 20px; --lh-h2: 1.3; --fs-h3: 16px; --lh-h3: 1.4; --fs-body: 14px; --lh-body: 1.58; --fs-body-sm: 13px; --lh-body-sm: 1.55; --fs-caption: 12px; --lh-caption: 1.5; --fs-micro: 11px; --lh-micro: 1.45; --fs-label: 10px; --lh-label: 1.4; /* ── Radius system ──────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-pill: 999px; /* ── Spacing (4-point base) ─────────────────────────────── */ --sp-0: 0; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 14px; --sp-5: 18px; --sp-6: 22px; --sp-7: 28px; --sp-8: 36px; --sp-9: 48px; /* ── Shadow / elevation ─────────────────────────────────── */ --shadow-card: 0 1px 2px rgba(0,0,0,0.02); --shadow-pop: 0 4px 14px rgba(0,0,0,0.08); --shadow-float:0 12px 40px rgba(0,0,0,0.16); --shadow-window: 0 0 0 0.5px rgba(255,255,255,0.1), 0 30px 80px rgba(0,0,0,0.6), 0 12px 32px rgba(0,0,0,0.4); --shadow-brand: 0 4px 14px rgba(232, 108, 199, 0.38); --shadow-orb: 0 6px 20px rgba(232, 108, 199, 0.28), 0 2px 6px rgba(0,0,0,0.08); /* ── Glass / blur ───────────────────────────────────────── */ --glass-bg: rgba(248, 245, 242, 0.72); --glass-bg-light: rgba(255,255,255,0.6); --glass-blur: blur(30px) saturate(180%); --glass-blur-sm: blur(20px); /* ── Motion ─────────────────────────────────────────────── */ --ease-standard: cubic-bezier(0.2, 0.9, 0.2, 1); --ease-emphatic: cubic-bezier(0.34, 1.4, 0.64, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --dur-instant: 120ms; --dur-fast: 180ms; --dur-medium: 280ms; --dur-slow: 500ms; } /* ───────────────────────────────────────────────────────────── Semantic defaults — use by applying the class, or replicate inline in components. Most of Mahana's UI uses inline styles, so these are provided as guardrails + reference. ───────────────────────────────────────────────────────────── */ html, body { font-family: var(--font-sans); color: var(--ink-1); background: var(--paper-base); } .display-1 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: -0.02em; } .display-2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: -0.01em; } .display-italic { font-family: var(--font-serif); font-style: italic; font-weight: 400; } h1, .h1 { font-family: var(--font-sans); font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); } h2, .h2 { font-family: var(--font-sans); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; letter-spacing: -0.01em; color: var(--ink-1); } h3, .h3 { font-family: var(--font-sans); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; color: var(--ink-1); } p, .body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-1); } .body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--ink-2); } .caption { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--ink-4); } .micro { font-size: var(--fs-micro); color: var(--ink-5); } .label-kicker { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--ink-5); } code, .mono { font-family: var(--font-mono); font-size: 0.92em; background: var(--paper-hover); padding: 1px 5px; border-radius: var(--radius-xs); } /* Gradient text (the signature "Mastermind" treatment) */ .brand-gradient-text { background: var(--mahana-gradient); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; } /* Standard surfaces */ .surface-paper { background: var(--paper-base); } .surface-card { background: var(--paper-card); border: 1px solid var(--line-2); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .surface-glass { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--line-1); } .surface-ink { background: var(--ink-bg); color: var(--ink-fg-2); border: 1px solid var(--ink-line); border-radius: var(--radius-lg); } /* Standard button recipes */ .btn { font-family: var(--font-sans); font-size: var(--fs-caption); font-weight: 500; padding: 5px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-2); background: var(--paper-card); color: var(--ink-3); cursor: pointer; transition: background var(--dur-fast), color var(--dur-fast); } .btn:hover { background: var(--paper-hover); color: var(--ink-2); } .btn-primary { background: var(--mahana-gradient); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--shadow-brand); } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-4); } .btn-ghost:hover { background: var(--paper-hover); color: var(--ink-2); } /* The signature dreamy bloom — use as desktop wallpaper / hero. */ .mahana-ambient { background: radial-gradient(ellipse at 80% 0%, rgba(255, 179, 89, 0.55), transparent 45%), radial-gradient(ellipse at 20% 15%, rgba(255, 122, 138, 0.55), transparent 50%), radial-gradient(ellipse at 50% 55%, rgba(232, 108, 199, 0.48), transparent 55%), radial-gradient(ellipse at 95% 85%, rgba(139, 123, 255, 0.55), transparent 50%), radial-gradient(ellipse at 10% 100%, rgba(111, 216, 255, 0.55), transparent 50%), #E86CC7; } .mahana-aurora-paper { background: radial-gradient(ellipse at 85% 10%, rgba(255, 179, 89, 0.20), transparent 50%), radial-gradient(ellipse at 15% 20%, rgba(255, 122, 138, 0.20), transparent 50%), radial-gradient(ellipse at 95% 90%, rgba(139, 123, 255, 0.18), transparent 50%), radial-gradient(ellipse at 5% 95%, rgba(111, 216, 255, 0.18), transparent 50%), var(--paper-tint); } /* Keyframes used across the product */ @keyframes mm-shimmer { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } @keyframes mm-pulse { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.08); opacity: 1; } } @keyframes mm-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }