/** * Lush — design tokens. * * Every colour, size and duration the app uses lives here. Screens and * components must not hardcode values. * * Theme resolution order in the real app: * 1. explicit user choice -> * 2. Telegram colorScheme -> platform.js copies it into data-theme * 3. system preference -> prefers-color-scheme * * Only Telegram's colorScheme is used. Colours from themeParams are ignored: * they are arbitrary per client and cannot be held to a contrast floor. * * The .theme-light / .theme-dark classes repeat the same blocks so a single page can * show both themes side by side (the artboard sheet does exactly that). * The app itself never needs them. */ :root, .theme-light { /* surfaces and ink */ --bg: #f5f3f8; --surface: #ffffff; --surface-2: rgba(22, 18, 31, .05); --text: #16121f; --muted: rgba(22, 18, 31, .66); --border: rgba(22, 18, 31, .14); --border-strong: rgba(22, 18, 31, .26); /* accent and status */ --accent: #4c2a80; --accent-ink: #ffffff; --accent-soft: rgba(76, 42, 128, .09); --danger: #b3261e; --danger-soft: rgba(179, 38, 30, .09); --ok: #146c43; --ok-soft: rgba(20, 108, 67, .10); /* Gold is a FILL, never a text colour: #d4a02a on white is 2.37:1. Anything written on gold uses --gold-ink. */ --gold: #d4a02a; --gold-ink: #241a05; --gold-soft: rgba(212, 160, 42, .14); /* wheel sectors: two alternating tones plus one highlight, no rainbow */ --sector-a: #4c2a80; --sector-a-ink: #ffffff; --sector-b: #ece7f5; --sector-b-ink: #3d2168; --sector-hi: #d4a02a; --sector-hi-ink: #241a05; --shadow-card: 0 8px 24px rgba(22, 18, 31, .08); --shadow-sheet: 0 -10px 40px rgba(22, 18, 31, .22); --locked-filter: grayscale(1) opacity(.42); color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0c0a12; --surface: #17131f; --surface-2: rgba(242, 239, 247, .07); --text: #f2eff7; --muted: rgba(242, 239, 247, .68); --border: rgba(242, 239, 247, .14); --border-strong: rgba(242, 239, 247, .28); --accent: #b9a0f5; --accent-ink: #140f1f; --accent-soft: rgba(185, 160, 245, .14); --danger: #f2867c; --danger-soft: rgba(242, 134, 124, .14); --ok: #5fd39b; --ok-soft: rgba(95, 211, 155, .14); --gold: #e8c05a; --gold-ink: #1a1205; --gold-soft: rgba(232, 192, 90, .16); --sector-a: #4c2a80; --sector-a-ink: #f2eff7; --sector-b: #2a2237; --sector-b-ink: #f2eff7; --sector-hi: #e8c05a; --sector-hi-ink: #1a1205; --shadow-card: 0 10px 28px rgba(0, 0, 0, .5); --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .55); --locked-filter: grayscale(1) brightness(.52); color-scheme: dark; } } :root[data-theme='dark'], .theme-dark { --bg: #0c0a12; --surface: #17131f; --surface-2: rgba(242, 239, 247, .07); --text: #f2eff7; --muted: rgba(242, 239, 247, .68); --border: rgba(242, 239, 247, .14); --border-strong: rgba(242, 239, 247, .28); --accent: #b9a0f5; --accent-ink: #140f1f; --accent-soft: rgba(185, 160, 245, .14); --danger: #f2867c; --danger-soft: rgba(242, 134, 124, .14); --ok: #5fd39b; --ok-soft: rgba(95, 211, 155, .14); --gold: #e8c05a; --gold-ink: #1a1205; --gold-soft: rgba(232, 192, 90, .16); --sector-a: #4c2a80; --sector-a-ink: #f2eff7; --sector-b: #2a2237; --sector-b-ink: #f2eff7; --sector-hi: #e8c05a; --sector-hi-ink: #1a1205; --shadow-card: 0 10px 28px rgba(0, 0, 0, .5); --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, .55); --locked-filter: grayscale(1) brightness(.52); color-scheme: dark; } /* Scales are theme-independent: declared once, outside the theme blocks. */ :root { /* four typography roles */ --t-title: 26px; --t-title-lh: 1.15; --t-head: 20px; --t-head-lh: 1.25; --t-body: 15px; --t-body-lh: 1.45; --t-caption: 13px; --t-caption-lh: 1.4; /* spacing */ --gap-1: 4px; --gap-2: 8px; --gap-3: 16px; --gap-4: 24px; --gap-5: 32px; /* extension: separation between screen sections */ --radius: 18px; --radius-sm: 12px; --radius-pill: 999px; --tap: 44px; --font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* durations and curves — one place, so the frontend repeats them exactly */ --dur-fast: 120ms; --dur-tap: 160ms; --dur-screen: 260ms; --dur-sheet: 280ms; --dur-unlock: 1400ms; /* the one loud moment: a course opening */ --ease-out: cubic-bezier(.2, .9, .3, 1); --ease-pop: cubic-bezier(.2, .9, .3, 1.25); --ease-in-out: cubic-bezier(.4, 0, .2, 1); }