/* ========================================================================== Kimbo (customer app) - design tokens (SPEC section 5). The ONLY file with literal colours. Every other stylesheet uses var(--token). Dark only; the blue-black surfaces and the mint accent of the current identity are kept. The contrast of each text/background pair is listed in SPEC 5.1 (measured by docs/web-rework/final-proto/tests/contrast.mjs). Not linked yet: index.html links these files from S0.4 on. ========================================================================== */ :root { color-scheme: dark; /* ---- Surfaces (blue-black, four steps) ---- */ --bg: #07111f; --bg-deep: #050c16; --s1: #0d1a2c; /* cards */ --s2: #12233a; /* inputs, nested */ --s3: #192f4c; /* raised, hover */ --s4: #20395b; /* hover on --s3 */ --raised: #10213a; /* dialogs, sheets */ --scrim: rgba(3, 8, 16, .72); --actionbar-from: rgba(7, 17, 31, 0); /* sticky next-step bar fade */ --actionbar-to: rgba(7, 17, 31, .92); --toast-bg: #14283f; --supbar-bg: #10294a; /* supervision bar */ --appbar-bg: rgba(7, 17, 31, .86); --dock-bg: rgba(8, 18, 33, .94); --rail-bg: rgba(8, 18, 32, .78); --qr-bg: #ffffff; /* a QR code needs a white quiet zone to scan */ --brand-bg: #08141f; --badge-ring: #0a1627; /* ring that separates a nav badge dot from the icon */ --hero-top: #10263d; /* hero and launch panel gradient */ --hero-bottom: #0c1b2d; /* ---- Lines ---- */ --line: rgba(155, 181, 215, .15); --line-strong: rgba(155, 181, 215, .30); --line-hover: #5d7ba1; --field-border: #5f7899; /* 3.49:1 on --s2: non-text contrast for inputs */ --field-border-hover: #7b93b3; /* ---- Text ---- */ --ink: #f1f6ff; /* 16.1:1 on --s1 */ --ink-2: #cbd7e8; /* 12.0:1 */ --muted: #a3b5cc; /* 8.4:1 on --s1, 6.5:1 on --s3 */ --placeholder: #8ea3bd; /* 6.1:1 on --s2 */ --disabled: #7d90a9; /* 4.9:1 on --s2 */ --faint: #6e829d; /* decorative dots only, never text */ /* ---- Brand + state colours ---- */ --accent: #62e2bc; /* mint, 10.9:1 on --s1 as text */ --accent-hi: #86f0d0; --accent-lo: #4fd9b0; --accent-ink: #031812; /* text on accent fills, >= 10.4:1 */ --accent-soft: rgba(98, 226, 188, .13); --accent-wash: rgba(98, 226, 188, .20); /* hover on --accent-soft */ --accent-faint: rgba(98, 226, 188, .08); --accent-halo: rgba(98, 226, 188, .06); --accent-line: rgba(98, 226, 188, .42); --accent-glow: rgba(98, 226, 188, .30); --accent-clear: rgba(98, 226, 188, 0); --warn: #f4c05d; --warn-soft: rgba(244, 192, 93, .14); --warn-faint: rgba(244, 192, 93, .07); --warn-wash: rgba(244, 192, 93, .22); --warn-line: rgba(244, 192, 93, .50); --danger: #ff8fa0; --danger-strong: #f0506e; --danger-ink: #1a0509; /* text on --danger-strong, 5.7:1 */ --danger-soft: rgba(255, 143, 160, .13); --danger-line: rgba(255, 143, 160, .50); --info: #8fb8ff; --info-soft: rgba(143, 184, 255, .14); --info-line: rgba(143, 184, 255, .45); --focus: #9ff3da; /* ---- Overlays (hover washes, spinner tracks, page glow) ---- */ --wash: rgba(255, 255, 255, .03); --wash-2: rgba(255, 255, 255, .06); --spinner-dark: rgba(3, 24, 18, .25); --spinner-light: rgba(255, 255, 255, .25); --glow-mint: rgba(98, 226, 188, .085); --glow-blue: rgba(88, 130, 255, .07); /* ---- Type ---- */ --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace; --fs-cap: .75rem; /* 12 captions, dock labels (the minimum anywhere) */ --fs-sm: .875rem; /* 14 secondary text, hints, chips */ --fs-md: 1rem; /* 16 body, inputs, buttons */ --fs-lg: 1.125rem; /* 18 lead, card titles */ --fs-xl: 1.375rem; /* 22 section titles */ --fs-2xl: 1.75rem; /* 28 page titles (phone) */ --fs-3xl: 2.25rem; /* 36 page titles (desktop), hero */ --fs-num: 2rem; /* 32 big numbers in stat tiles */ /* ---- Space (4px base) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; /* ---- Radii ---- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; /* ---- Elevation (dark theme: lighter surface + hairline + soft shadow) ---- */ --e1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.30); --e2: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px -12px rgba(0,0,0,.55); --e3: 0 1px 0 rgba(255,255,255,.06) inset, 0 30px 80px -20px rgba(0,0,0,.70); --e-thumb: 0 2px 8px rgba(0,0,0,.5); --e-bar: 0 8px 24px -8px rgba(0,0,0,.6); --glow: 0 10px 28px -10px var(--accent-glow); /* ---- Motion ---- */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease: cubic-bezier(.2, .8, .2, 1); /* ---- Layout ---- Safe areas. Device inset (notch / home bar) = the larger of env() and Telegram's own value (they describe the SAME area, so never add them). Telegram's content inset (its header/buttons in fullscreen) is a DIFFERENT area and is added on top. To verify on real devices (SPEC 8.7, R-11). */ --safe-t: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)); --safe-b: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)); --safe-l: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px)); --safe-r: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px)); --rail-w: 0px; --dock-h: 68px; --appbar-h: 56px; --action-h: 68px; /* sticky next-step bar (phone, setup stages only) */ --pad: 16px; --content-max: 1120px; --target: 44px; /* minimum interactive size */ } /* Breakpoints: 761 (rail replaces the dock, two-column cards) and 1100 (full rail, route column, call grid). Nothing else. */ @media (min-width: 761px) { :root { --rail-w: 92px; --dock-h: 0px; --pad: 24px; } } @media (min-width: 1100px) { :root { --rail-w: 252px; --pad: 32px; } }