Arxip222andClaude Opus 5.5
b8a93ce9d4
A second channel to the same dialog engine as the Telegram bot: consent, onboarding, scales and check-ins come from app/dialog; the bot is unchanged. - API: /auth/emias (doctor's one-time connect code via EmiasMock), /auth/emias/demo (synthetic personas), /auth/anonymous (random token, nothing stored in the identity DB), /crisis/resources from crisis.yaml - web/: React + TS + Vite, mobile-first, safe areas, hash routing, tokens and texts isolated for a Capacitor mobile build Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
91 lines
2.5 KiB
CSS
91 lines
2.5 KiB
CSS
/*
|
|
* Design tokens — the single source of colours, type and spacing.
|
|
* When the app moves to native (Capacitor wraps this same bundle; a React Native port would map these 1:1 to a
|
|
* theme object), only this file changes. Components never use raw colours or pixel sizes outside the scale.
|
|
*/
|
|
:root {
|
|
/* Base: cool ink on cool white. */
|
|
--c-ink: #13233a;
|
|
--c-text: #13233a;
|
|
--c-text-2: #46566b;
|
|
--c-text-3: #6b7a8e;
|
|
--c-page: #f4f7fb;
|
|
--c-surface: #ffffff;
|
|
--c-band: #e9f0fb; /* solid tint behind the welcome hero */
|
|
--c-border: #dbe3ee;
|
|
--c-border-strong: #b3c0d1;
|
|
|
|
/* Care tracks: one colour per thing the service does. The same colour marks the track everywhere
|
|
(welcome preview, chat questions), so colour carries meaning, never decoration. */
|
|
--c-meds: #0e8c7f;
|
|
--c-meds-soft: #e2f4f1;
|
|
--c-mood: #e79a0c;
|
|
--c-mood-soft: #fdf1da;
|
|
--c-mood-ink: #8a5800; /* text on mood-soft (AA) */
|
|
--c-doctor: #2350c8;
|
|
--c-doctor-soft: #e7eefc;
|
|
|
|
/* Action colour = the doctor/ЕМИАС blue. */
|
|
--c-primary: #2350c8;
|
|
--c-primary-hover: #1c43ac;
|
|
--c-primary-active: #163689;
|
|
--c-primary-soft: #e7eefc;
|
|
|
|
/* Mood scale 1 → 5 (heavy → good); used only for the scale. */
|
|
--c-scale-1: #d9485f;
|
|
--c-scale-2: #ef8a3c;
|
|
--c-scale-3: #f2c230;
|
|
--c-scale-4: #7cc35b;
|
|
--c-scale-5: #2fa36b;
|
|
|
|
--c-danger: #c8283a;
|
|
--c-danger-hover: #a91f2f;
|
|
--c-danger-soft: #fdebed;
|
|
--c-success: #1e8a55;
|
|
--c-warning-soft: #fff4dc;
|
|
--c-warning-border: #e7b448;
|
|
--c-focus: #3b82f6;
|
|
|
|
/* Type: Golos Text — Russian open-source UI typeface (OFL), bundled locally so the app works offline. */
|
|
--font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--fs-12: 0.75rem;
|
|
--fs-14: 0.875rem;
|
|
--fs-16: 1rem;
|
|
--fs-18: 1.125rem;
|
|
--fs-22: 1.375rem;
|
|
--fs-28: 1.75rem;
|
|
--fs-40: 2.5rem;
|
|
--lh-tight: 1.15;
|
|
--lh-text: 1.5;
|
|
|
|
/* Spacing: 4 px grid. */
|
|
--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;
|
|
|
|
/* Radius hierarchy: containers > controls > fields > chips. */
|
|
--r-card: 14px;
|
|
--r-control: 10px;
|
|
--r-field: 8px;
|
|
--r-chip: 6px;
|
|
|
|
--tap: 48px; /* minimum touch target */
|
|
--header-h: 64px;
|
|
--content-max: 1160px;
|
|
|
|
/* Safe areas (notch, home indicator) for the mobile shell. */
|
|
--safe-top: env(safe-area-inset-top, 0px);
|
|
--safe-bottom: env(safe-area-inset-bottom, 0px);
|
|
--safe-left: env(safe-area-inset-left, 0px);
|
|
--safe-right: env(safe-area-inset-right, 0px);
|
|
|
|
--ease: cubic-bezier(0.2, 0, 0, 1);
|
|
}
|