/* Generated by scripts/sync-design-tokens.mjs from design/styles. Do not edit. */ /* ========================================================= Masha — Theme Tokens (single source of truth) v1.0 · 2026-05 ========================================================= Every HTML file in this repo links here. Token names are stable: rename → grep all callers first. ========================================================= */ :root { /* ─────── ink (dark surfaces) ─────── */ --ink-1: #060509; --ink-2: #0a0814; --ink-3: #14101c; --ink-4: #1f1828; --ink-5: #2b223d; /* ─────── paper (light surfaces) ─────── */ --paper: #ededed; --paper-soft: #c9c5d4; --muted: #8e89a0; --muted-2: #6b667c; /* ─────── aurora trio (the brand) ─────── */ --violet: #8b5cf6; --violet-2: #a78bfa; --violet-deep: #5b21b6; --cyan: #22d3ee; --cyan-2: #67e8f9; --pink: #ec4899; --pink-2: #f472b6; /* ─────── supporting hues ─────── */ --gold: #fbbf24; --coral: #fb7185; --green: #34d399; --tg: #229ed9; /* Telegram brand */ --tg-deep: #1e8bbf; /* ─────── rgb triples (for rgba() composition in Tier-2) ─────── */ --violet-rgb: 139 92 246; --violet-2-rgb: 167 139 250; --cyan-rgb: 34 211 238; --pink-rgb: 236 72 153; --gold-rgb: 251 191 36; --green-rgb: 52 211 153; --coral-rgb: 251 113 133; --tg-rgb: 34 158 217; --ink-1-rgb: 6 5 9; --ink-2-rgb: 10 8 20; --ink-3-rgb: 20 16 28; --paper-rgb: 237 237 237; /* steel — the aurora with the brand drained out, for surfaces where no assistant is present. Cool enough not to read as a smudge on dark. */ --steel-rgb: 100 116 139; --steel-2-rgb: 148 163 184; --steel-3-rgb: 71 85 105; /* ─────── aurora gradients ─────── */ --aurora: linear-gradient(120deg, #8b5cf6 0%, #ec4899 50%, #22d3ee 100%); --aurora-soft: linear-gradient(120deg, rgba(139,92,246,.4), rgba(236,72,153,.3), rgba(34,211,238,.4)); --aurora-warm: linear-gradient(120deg, #fbbf24 0%, #ec4899 55%, #8b5cf6 100%); --aurora-deep: linear-gradient(120deg, #5b21b6 0%, #8b5cf6 50%, #22d3ee 100%); /* legacy aliases used by the landing — keep until migration is finished */ --grad: var(--aurora); --grad-soft: var(--aurora-soft); /* ─────── surfaces (glass over dark) ─────── */ --card: rgba(255,255,255,.035); --card-2: rgba(255,255,255,.06); --card-border: rgba(255,255,255,.08); --card-border-2: rgba(255,255,255,.14); /* ─────── typography ─────── */ /* Outfit has no Cyrillic; Geist covers it, so a mixed-script line lands in one face only where a surface sets --font-display to Geist itself. */ --font-display: "Outfit", "Geist", system-ui, sans-serif; --font-sans: "Geist", "Inter", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "Menlo", monospace; --font-hand: "Caveat", cursive; /* type scale (clamped, responsive) Two ladders, not one. HEADINGS step hard — a display is meant to read as several times an act opener. TEXT steps softly, because running copy at adjacent sizes has to read as one voice. */ /* headings — Outfit, semibold, negative tracking */ --t-display: clamp(38px, 6vw, 76px); --t-section: clamp(32px, 4.1vw, 58px); --t-sub: clamp(26px, 2.6vw, 36px); --t-block: clamp(22px, 1.9vw, 26px); --t-card: 20px; /* text — Geist */ --t-quote: clamp(21px, 2.2vw, 28px); --t-lede: clamp(17px, 1.45vw, 21px); --t-body: 16px; --t-caption: 13.5px; --t-micro: 12px; /* chrome: legal line, compact nav, mock placeholders */ --t-label: 11px; /* sentence-case, tracked — system/meta */ /* leading — one step per size band, paired by name with the ramp above */ --lh-flat: 1; /* single-line by contract: labels, wordmarks */ --lh-display: 1; --lh-heading: 1.08; --lh-title: 1.2; --lh-quote: 1.4; --lh-text: 1.55; --lh-prose: 1.65; /* answers and essays — read rather than scanned */ /* tracking — Outfit needs negative tracking above ~26px and none below. Positive tracking is for small type only, where it buys legibility. */ --tr-display: -0.04em; --tr-heading: -0.035em; --tr-title: -0.025em; --tr-card: -0.012em; --tr-text: 0em; --tr-label: 0.02em; --tr-caps: 0.08em; /* weight — four, and the set is closed */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ─────── spacing scale ─────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; /* ─────── radii ─────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 28px; --r-3xl: 36px; --r-pill: 999px; /* ─────── motion ─────── */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-soft: cubic-bezier(.4, 0, .2, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 480ms; --dur-5: 720ms; /* ─────── elevation ─────── */ --shadow-1: 0 4px 16px -6px rgba(0,0,0,.3); --shadow-2: 0 10px 40px -10px rgba(0,0,0,.5); --shadow-3: 0 20px 60px -20px rgba(0,0,0,.6); --shadow-glow-violet: 0 10px 50px -12px rgba(139,92,246,.7); --shadow-glow-cyan: 0 10px 50px -12px rgba(34,211,238,.55); --shadow-glow-pink: 0 10px 50px -12px rgba(236,72,153,.55); /* ─────── focus ring ─────── */ --focus: 0 0 0 2px var(--ink-1), 0 0 0 4px var(--violet-2); } /* ========================================================= Masha — Surface tokens · MINI-APP v1.0 · 2026-05 ========================================================= Tier 2: SEMANTIC tokens for the Telegram WebApp surface. Maps brand primitives (theme.css) into role-based tokens that components actually consume. Density: tight (4–16px gaps, small radii) Type scale: small/UI (body 16, h1 24, fixed not fluid) Background: hybrid — listens to Telegram theme, falls back to our warm-midnight palette Accent use: targeted (CTA, badges, brand moments only — not a decoration layer) Hybrid Telegram theme strategy (option C): - fg/bg colors LISTEN to Telegram theme params, so the mini-app respects the user's TG theme - accent colors are ALWAYS ours, so brand doesn't drift ========================================================= */ [data-surface="mini-app"] { /* ─────── surfaces — listen to Telegram, fall back to brand midnight ─────── */ --surface-page: var(--tg-theme-bg-color, var(--ink-3)); /* warm midnight */ --surface-card: var(--tg-theme-secondary-bg-color, var(--ink-4)); --surface-card-raised: var(--tg-theme-secondary-bg-color, var(--ink-5)); --surface-inverse: var(--paper); --surface-inverse-rgb: var(--paper-rgb); --surface-overlay: var(--tg-theme-bg-color, rgba(15,10,20,.95)); /* ─────── chrome roles ─────── */ --nav-height: 64px; --header-height: 52px; --surface-chrome: var(--tg-theme-secondary-bg-color, var(--ink-2)); --surface-skeleton: rgb(128 128 128 / .12); --surface-scrim: rgb(0 0 0 / .5); /* Boot is a brand moment, not a themed screen: its curtains blend with mix-blend-mode: screen and vanish on a light ground. Fixed dark, both themes. */ --surface-boot: var(--ink-2); --text-on-boot: #ffffff; --text-on-boot-rgb: 255 255 255; --text-on-boot-muted: rgb(255 255 255 / .42); /* ─────── text — listen to Telegram ─────── */ --text-primary: var(--tg-theme-text-color, var(--paper)); --text-secondary: var(--tg-theme-hint-color, var(--paper-soft)); --text-muted: var(--tg-theme-hint-color, var(--muted)); --text-link: var(--tg-theme-link-color, var(--cyan-2)); --text-section-head: var(--tg-theme-section-header-text-color, var(--muted)); --text-on-accent: #ffffff; /* Inside the lit band the hint grey collapses to ~1.3:1 at any glow strength worth having, so text that lives up there is white instead. */ --text-on-glow: #ffffff; --text-on-glow-muted: rgb(255 255 255 / .88); --text-on-inverse: var(--ink-1); --text-on-inverse-muted: var(--muted-2); /* ─────── borders ─────── */ --border-subtle: rgba(128,128,128,.15); --border-strong: rgba(128,128,128,.25); --border-focus: var(--violet-2); /* ─────── accent roles — ALWAYS ours, ignore Telegram override ─────── */ --accent: var(--violet); --accent-2: var(--pink); --accent-3: var(--cyan); --accent-warm: var(--gold); --accent-aurora: var(--aurora); --accent-aurora-soft: var(--aurora-soft); --accent-positive: var(--green); --accent-negative: var(--tg-theme-destructive-text-color, var(--coral)); --accent-warning: var(--gold); --accent-tg: var(--tg-theme-button-color, var(--violet)); /* primary action */ --accent-tg-text: var(--tg-theme-button-text-color, #ffffff); --accent-tg-hover: var(--tg-deep); --accent-hover: var(--violet-deep); --accent-bright: var(--violet-2); /* lighter accent — "alive" icon/text on dark */ /* rgb triples — for rgba() composition (soft fills, glows, selection) */ --accent-rgb: var(--violet-rgb); --accent-2-rgb: var(--pink-rgb); --accent-3-rgb: var(--cyan-rgb); --accent-warm-rgb: var(--gold-rgb); --accent-positive-rgb: var(--green-rgb); --accent-tg-rgb: var(--tg-rgb); --accent-bright-rgb: var(--violet-2-rgb); /* soft fills (mini-app uses these very sparingly — flat surface) */ --accent-soft: rgb(var(--accent-rgb) / .12); --accent-2-soft: rgb(var(--accent-2-rgb) / .10); --accent-3-soft: rgb(var(--accent-3-rgb) / .10); --accent-warm-soft: rgb(var(--accent-warm-rgb) / .10); --accent-tg-soft: rgb(var(--accent-tg-rgb) / .08); /* gradient wells — mini-app keeps them tonal/calm */ --grad-warm-tile: linear-gradient(135deg, var(--gold), var(--gold)); --grad-cool-tile: linear-gradient(135deg, var(--green), var(--cyan)); --grad-hot-tile: linear-gradient(135deg, var(--coral), var(--pink)); --grad-violet-tile: linear-gradient(135deg, var(--violet),var(--violet-2)); /* ─────── radii (tight) ─────── */ --radius-button: 12px; --radius-card: 14px; --radius-card-sm: 10px; --radius-input: 12px; --radius-pill: var(--r-pill); --radius-tile: 18px; /* ─────── type roles (small/UI, fixed not fluid) ─────── */ /* Digits carry no descenders and read optically smaller than text at the same size, so the numeral roles step above display rather than beside it. */ --type-metric: 38px; /* the one number a screen is about */ --type-metric-sm: 26px; /* a number inside a tile or ring */ --type-display: 30px; /* hero on a screen, not a page */ --type-headline: 24px; /* h1 inside a screen */ --type-title: 20px; /* h2 */ --type-block-title: 18px; /* h3 inside tabs / plans */ --type-card-title: 17px; /* card heading — separates from body by weight, not size */ --type-quote: 17px; --type-lede: 16px; /* longer body */ --type-body: 16px; --type-mono: 13.5px; --type-caption: 13.5px; --type-micro: 12px; --type-label: 11px; /* sentence-case, tracked — never uppercase */ --type-label-tracking: var(--tr-caps); /* ─────── leading roles ─────── */ --leading-display: var(--lh-title); /* a 30px screen hero is still a line, not a poster */ --leading-heading: var(--lh-title); --leading-body: var(--lh-text); --leading-prose: var(--lh-prose); --leading-flat: var(--lh-flat); /* Geist, not Outfit: Outfit ships no Cyrillic, so an Outfit headline in a Russian screen silently renders in the fallback and mixes faces mid-line. */ --font-headline: var(--font-sans); --font-ui: var(--font-sans); /* ─────── spacing roles (tight) ─────── */ --space-page-x: var(--s-4); /* 16px */ --space-section: var(--s-6); /* 24px between screen sections */ --space-block: var(--s-4); /* 16px between blocks */ --space-stack: var(--s-2); /* 8px between siblings */ --space-inline: var(--s-3); /* 12px gap */ --space-card: 14px; /* internal card padding */ --space-card-tight: var(--s-3); /* 12px */ --space-empty-y: var(--s-16); /* 64px — vertical breathing room in an empty state */ /* ─────── elevation roles (subdued; mini-app stays flat) ─────── */ --elev-card: none; --elev-hover: var(--shadow-1); --elev-glow: none; /* ─────── pattern & texture intensity (Tier-3 reads these) ─────── Mini-app is the utility surface: texture is a faint brand whisper, never a decoration layer, and holds still to keep the UI calm. */ --pat-aurora-opacity: .92; --pat-aurora-saturate: 1.1; --pat-aurora-blend: screen; --pat-aurora-boost: 1.3; --pat-aurora-anim: none; /* the boot breathes; the app behind text holds still */ --pat-scrim-opacity: 1; /* Hues of the atmosphere. A route may override the trio to change what the light says — steel on the incognito chats, where no assistant is present. */ --glow-1-rgb: var(--accent-rgb); --glow-2-rgb: var(--accent-2-rgb); --glow-3-rgb: var(--accent-3-rgb); /* The lit band: everything above --pat-band-h glows at full strength, and the page returns to bare colour by --pat-band-end. Only the h1 lives that high, and at 24/600 it is WCAG large text, so 3:1 is the bar there, not 4.5:1. */ --pat-band-h: 48px; --pat-band-end: 138px; --pat-floor-opacity: .85; /* the answering glow under the glass nav */ --pat-grain-opacity: .12; --pat-spark-opacity: .5; --pat-grid-opacity: .6; --pat-wave-opacity: .8; --pat-drift: 1; --pat-drift-dur: 40s; /* much slower than landing */ /* ─────── component-specific quirks ─────── */ --btn-padding-y: 10px; --btn-padding-x: 16px; --btn-font-size: var(--type-body); --btn-font-size-sm: var(--type-caption); --btn-font-size-lg: var(--type-card-title); --btn-font-weight: var(--fw-semibold); --pill-font-size: var(--type-micro); --pill-font-weight: var(--fw-medium); } /* The chats talk to a bare model, and Incognito.module.css already says the missing accent is what tells the user no assistant is on the other end. The light stays; only the brand leaves it. */ [data-surface="mini-app"] [data-glow="incognito"] { --glow-1-rgb: var(--steel-rgb); --glow-2-rgb: var(--steel-2-rgb); --glow-3-rgb: var(--steel-3-rgb); --pat-aurora-saturate: 1; --pat-aurora-boost: 1.15; } /* Telegram's light theme. applyTheme puts .light on the same element that carries data-surface, so this is one element, not a descendant selector. */ [data-surface="mini-app"].light { --surface-inverse: var(--ink-2); --surface-inverse-rgb: var(--ink-2-rgb); --text-on-inverse: var(--paper); --text-on-inverse-muted: var(--muted); --accent-bright: var(--violet-deep); --surface-overlay: var(--tg-theme-bg-color, rgba(255, 255, 255, .95)); /* On a light ground the band darkens rather than lights, so text in it keeps the page's own colours instead of flipping to white. */ --text-on-glow: var(--text-primary); --text-on-glow-muted: var(--text-secondary); /* The aurora reads far heavier over a light ground than a dark one, and screen against near-white only washes it out. */ --pat-aurora-opacity: .5; --pat-aurora-blend: normal; --pat-aurora-boost: 1; } :root { /* Geist carries display too: Outfit ships no Cyrillic, so it never rendered a Russian heading here — the browser fell through to Geist per character. */ --font-display: 'Geist Variable', system-ui, sans-serif; --font-sans: 'Geist Variable', system-ui, sans-serif; --font-mono: 'Geist Mono Variable', ui-monospace, Menlo, monospace; } /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Typography */ html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-ui); background-color: var(--surface-page); color: var(--text-primary); line-height: 1.4; overflow-x: hidden; } #root { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================= Masha — Tier 3: BOOT SCENE (the .ds-boot-* layer) v1.0 · 2026-08 ========================================================= Lifted from prototypes/mini-app.html, variant «Сияние · Маша» (SceneVeilMascot). Reads SEMANTIC tokens (Tier 2) ONLY. The curtains blend with mix-blend-mode: screen, which needs a dark ground — hence --surface-boot rather than --surface-page. ========================================================= */ .ds-boot { position: fixed; inset: 0; z-index: 2000; overflow: hidden; background: var(--surface-boot); color: var(--text-primary); font-family: var(--font-ui); isolation: isolate; --g1: var(--accent); --g1r: var(--accent-rgb); --g2: var(--accent-2); --g2r: var(--accent-2-rgb); --g3: var(--accent-3); --g3r: var(--accent-3-rgb); --breath: 7s; } .ds-boot::after { content: ""; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: var(--pat-grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,"); } /* ─────── stage (mascot · wordmark · caption · progress) ─────── */ .ds-boot-stage { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out); } .ds-boot[data-phase='settling'] .ds-boot-stage { opacity: 0; transform: translateY(-26px) scale(.86); pointer-events: none; } .ds-boot-disc { width: 116px; height: 116px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)); box-shadow: 0 0 0 1px rgb(var(--text-on-boot-rgb) / .2), 0 0 64px -2px rgb(var(--g3r) / .55), 0 16px 64px -8px rgb(var(--g1r) / .85); } .ds-boot-disc img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .ds-boot-wordmark { font-family: var(--font-headline); font-weight: 600; font-size: 25px; letter-spacing: -.02em; color: var(--text-on-boot); opacity: 0; animation: ds-boot-rise 600ms var(--ease-out) 550ms forwards; display: flex; align-items: center; gap: 6px; } .ds-boot-spark { color: var(--g3); font-size: 15px; } .ds-boot-loadcap { font: var(--fw-medium) var(--type-label) / var(--leading-flat) var(--font-ui); letter-spacing: var(--type-label-tracking); color: var(--text-on-boot-muted); opacity: 0; animation: ds-boot-rise 600ms var(--ease-out) 700ms forwards; } @keyframes ds-boot-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ds-boot-progress { width: 132px; height: 3px; border-radius: var(--radius-pill); overflow: hidden; background: rgb(var(--text-on-boot-rgb) / .1); position: relative; opacity: 0; animation: ds-boot-rise 600ms var(--ease-out) 800ms forwards; } .ds-boot-progress i { position: absolute; inset: 0; width: 40%; border-radius: var(--radius-pill); background: linear-gradient(90deg, transparent, var(--g2), var(--g1), transparent); animation: ds-boot-slide 1.25s ease-in-out infinite; } @keyframes ds-boot-slide { from { transform: translateX(-110%); } to { transform: translateX(320%); } } /* ─────── veil (the aurora curtains) ─────── */ .ds-boot-veil { position: absolute; inset: -10% -10% 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; filter: brightness(1.34); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out), filter 700ms var(--ease-out); } .ds-boot-vbloom { position: absolute; left: 50%; top: 2%; transform: translateX(-50%); width: 124%; height: 74%; opacity: .85; background: radial-gradient(ellipse 52% 58% at 50% 32%, rgb(var(--g1r) / .62), transparent 64%), radial-gradient(ellipse 70% 48% at 38% 12%, rgb(var(--g3r) / .52), transparent 70%), radial-gradient(ellipse 58% 50% at 66% 20%, rgb(var(--g2r) / .5), transparent 68%); filter: blur(42px); animation: ds-boot-breathe var(--breath) ease-in-out infinite; } @keyframes ds-boot-breathe { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .92; } 50% { transform: translateX(-50%) scale(1.07); opacity: 1; } } .ds-boot-curtain { position: absolute; top: -8%; height: 96%; width: 160px; border-radius: 50%; filter: blur(32px); opacity: .96; } .ds-boot-c1 { left: 4%; background: linear-gradient(180deg, rgb(var(--g3r) / 1), transparent 76%); animation: ds-boot-drift1 9s ease-in-out infinite; } .ds-boot-c2 { left: 30%; background: linear-gradient(180deg, rgb(var(--g1r) / .98), transparent 80%); width: 200px; animation: ds-boot-drift2 11s ease-in-out infinite; } .ds-boot-c3 { left: 56%; background: linear-gradient(180deg, rgb(var(--g2r) / .95), transparent 74%); animation: ds-boot-drift3 8s ease-in-out infinite; } .ds-boot-c4 { left: 78%; background: linear-gradient(180deg, rgb(var(--g3r) / .85), transparent 78%); width: 130px; animation: ds-boot-drift1 12s ease-in-out infinite reverse; } .ds-boot-c5 { left: 44%; background: linear-gradient(180deg, rgb(var(--g2r) / .8), transparent 72%); width: 110px; animation: ds-boot-drift2 7s ease-in-out infinite reverse; } @keyframes ds-boot-drift1 { 0%, 100% { transform: translateX(-26px) scaleY(1) skewX(-6deg); } 50% { transform: translateX(30px) scaleY(1.08) skewX(4deg); } } @keyframes ds-boot-drift2 { 0%, 100% { transform: translateX(24px) scaleY(.96) skewX(5deg); } 50% { transform: translateX(-30px) scaleY(1.1) skewX(-5deg); } } @keyframes ds-boot-drift3 { 0%, 100% { transform: translateX(-18px) scaleY(1.04) skewX(-3deg); } 50% { transform: translateX(34px) scaleY(.92) skewX(6deg); } } .ds-boot[data-phase='settling'] .ds-boot-veil { opacity: .62; transform: translateY(-28%) scaleY(.66); } @media (prefers-reduced-motion: reduce) { .ds-boot-curtain { animation: none; } .ds-boot-vbloom { animation: none; } .ds-boot-progress i { animation: none; width: 100%; opacity: .5; } .ds-boot-wordmark, .ds-boot-loadcap, .ds-boot-progress { animation: none; opacity: 1; } }