Arxip222andClaude Opus 5.5
b4b1bc51c8
- /flow renders the dialog engine's current step as a mock screen (consent,
age, onboarding and scales with progress, mood 0–10, free text, dose
reminder, crisis with hotlines and breathing, safety plan), so every
engine scenario gets the design without duplicating its logic
- today / meds / doctor / profile / messages tabs; navy sidebar and
emergency rail on desktop, emergency block and tab bar on phones
- API: GET /me/{token}/today (today's doses, week marks, next visit, demo
clock time); demo ЕМИАС sign-in seeds the persona's synthetic profile and
prescription from the dashboard fixtures
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
82 lines
1.9 KiB
CSS
82 lines
1.9 KiB
CSS
/*
|
|
* Design tokens — single source of colours, type and spacing (docs/mock, series 2).
|
|
* Capacitor wraps this same bundle; a React Native port maps these 1:1 to a theme object.
|
|
*/
|
|
:root {
|
|
/* Ink & surfaces */
|
|
--c-navy: #0f2747; /* primary buttons, headings, desktop sidebar */
|
|
--c-navy-hover: #0a1d37;
|
|
--c-navy-soft: #e8eef6;
|
|
--c-text: #13294b;
|
|
--c-text-2: #4d5d73;
|
|
--c-text-3: #7a889b;
|
|
--c-page: #ffffff;
|
|
--c-page-desk: #f4f7fb; /* desktop canvas behind white panels */
|
|
--c-surface: #ffffff;
|
|
--c-tile: #f3f7fb; /* soft card fill */
|
|
--c-border: #e2e9f1;
|
|
--c-border-strong: #c9d4e1;
|
|
|
|
/* Selection & positive: teal */
|
|
--c-teal: #17a08f;
|
|
--c-teal-strong: #0e7e71;
|
|
--c-teal-soft: #e3f5f2;
|
|
|
|
/* Info: blue */
|
|
--c-blue: #2f7fdb;
|
|
--c-blue-soft: #eaf3fd;
|
|
|
|
/* Help & crisis: red */
|
|
--c-red: #e2383b;
|
|
--c-red-strong: #c62b2e;
|
|
--c-red-soft: #fdeded;
|
|
--c-red-line: #f7d3d3;
|
|
|
|
/* Warning */
|
|
--c-amber: #e69a12;
|
|
--c-amber-soft: #fff4dd;
|
|
|
|
--c-focus: #2f7fdb;
|
|
|
|
/* Type: Golos Text (OFL), bundled locally — works offline. */
|
|
--font: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
--fs-12: 0.75rem;
|
|
--fs-13: 0.8125rem;
|
|
--fs-14: 0.875rem;
|
|
--fs-16: 1rem;
|
|
--fs-18: 1.125rem;
|
|
--fs-20: 1.25rem;
|
|
--fs-24: 1.5rem;
|
|
--fs-28: 1.75rem;
|
|
--fs-34: 2.125rem;
|
|
--fs-48: 3rem;
|
|
|
|
/* 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;
|
|
|
|
/* Radii: tiles > buttons > chips */
|
|
--r-tile: 16px;
|
|
--r-btn: 12px;
|
|
--r-chip: 999px;
|
|
|
|
--tap: 52px;
|
|
--nav-h: 64px;
|
|
--sidebar-w: 232px;
|
|
--rail-w: 300px;
|
|
|
|
--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);
|
|
}
|