/** * Design tokens. Two full themes, resolved in this order: * 1. explicit user choice -> * 2. platform theme -> platform.js copies Telegram's colorScheme here * 3. system preference -> prefers-color-scheme * * Every colour, size and duration used by the app lives here. Views and * components must not hardcode values — that is what kept the two themes * drifting apart before. */ :root { /* brand */ --steel-700: #2b5f8f; --steel-500: #4d87bf; --teal-400: #3ddad7; --gold-400: #e0a526; /* surfaces — light theme is the base */ --bg: #f2f3f8; --bg-deep: #e8eaf3; --bg-card: #ffffff; --bg-soft: rgba(20, 24, 48, .05); --border: rgba(20, 24, 48, .12); --border-strong: rgba(20, 24, 48, .22); --text: #171a2b; --text-dim: rgba(23, 26, 43, .70); --accent: var(--steel-700); --accent-2: #23507a; --on-accent: #ffffff; /* rarity: bright hue for borders and glow, ink for text (AA on both themes) */ --common: #6b7a99; --rare: #2196c9; --epic: #a86b2c; --legendary: #d99413; --common-ink: #4d5a75; --rare-ink: #0f6f99; --epic-ink: #8a5320; --legendary-ink: #8a5a00; --glow: rgba(43, 95, 143, .22); --glow-2: rgba(224, 165, 38, .10); --shadow-card: 0 10px 28px rgba(23, 26, 43, .10); --shadow-modal: 0 -10px 40px rgba(23, 26, 43, .22); --locked-filter: grayscale(1) opacity(.38); /* type scale */ --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2xl: 28px; --t-3xl: 40px; /* spacing scale */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --radius: 18px; --radius-sm: 12px; --radius-xs: 10px; --tap: 44px; --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0f1118; --bg-deep: #080a10; --bg-card: #191c26; --bg-soft: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .24); --text: #eef0f7; --text-dim: rgba(238, 240, 247, .68); --accent: var(--steel-500); --accent-2: #3a6f9f; --on-accent: #0b1017; --common: #8fa0bf; --rare: #4cc4f0; --epic: #d9a05c; --legendary: #ffc453; --common-ink: #8fa0bf; --rare-ink: #4cc4f0; --epic-ink: #d9a05c; --legendary-ink: #ffc453; --glow: rgba(77, 135, 191, .30); --glow-2: rgba(224, 165, 38, .14); --shadow-card: 0 12px 32px rgba(0, 0, 0, .45); --shadow-modal: 0 -10px 40px rgba(0, 0, 0, .5); --locked-filter: grayscale(1) brightness(.5); color-scheme: dark; } } :root[data-theme='dark'] { --bg: #0f1118; --bg-deep: #080a10; --bg-card: #191c26; --bg-soft: rgba(255, 255, 255, .06); --border: rgba(255, 255, 255, .12); --border-strong: rgba(255, 255, 255, .24); --text: #eef0f7; --text-dim: rgba(238, 240, 247, .68); --accent: var(--steel-500); --accent-2: #3a6f9f; --on-accent: #0b1017; --common: #8fa0bf; --rare: #4cc4f0; --epic: #d9a05c; --legendary: #ffc453; --common-ink: #8fa0bf; --rare-ink: #4cc4f0; --epic-ink: #d9a05c; --legendary-ink: #ffc453; --glow: rgba(77, 135, 191, .30); --glow-2: rgba(224, 165, 38, .14); --shadow-card: 0 12px 32px rgba(0, 0, 0, .45); --shadow-modal: 0 -10px 40px rgba(0, 0, 0, .5); --locked-filter: grayscale(1) brightness(.5); color-scheme: dark; } /* rarity helpers: .r- sets both the bright hue and the ink variant */ .r-common { --r: var(--common); --r-ink: var(--common-ink); } .r-rare { --r: var(--rare); --r-ink: var(--rare-ink); } .r-epic { --r: var(--epic); --r-ink: var(--epic-ink); } .r-legendary { --r: var(--legendary); --r-ink: var(--legendary-ink); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; min-height: 100%; overflow-x: clip; /* the burst animation scales past the viewport */ background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--t-md); line-height: 1.45; overscroll-behavior-y: none; transition: background .2s ease, color .2s ease; } body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(60% 40% at 15% 0%, var(--glow), transparent 70%), radial-gradient(45% 30% at 95% 8%, var(--glow-2), transparent 70%); pointer-events: none; z-index: 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }