/* ========================================================================== Terapi Afasia - Design Tokens Milestone 1. Single source of truth for every visual value. Never write a raw colour, size, or duration in components.css. ========================================================================== */ :root { /* ---- Colour: surfaces ------------------------------------------------- Warm neutral base. Deliberately not clinical white and not cool grey. This app lives in someone's home, not a hospital. */ --c-bg: #FAF8F5; /* page */ --c-surface: #FFFFFF; /* cards, raised areas */ --c-surface-2: #F2EEE8; /* subtle fills, inactive tracks */ --c-surface-3: #E8E2D9; /* pressed fills */ /* ---- Colour: ink ------------------------------------------------------ Three levels only. ink-3 is the floor and is never used below 20px. */ --c-ink: #22201D; /* primary text */ --c-ink-2: #55504A; /* secondary text */ --c-ink-3: #6B645C; /* tertiary, large text only */ /* --c-line is decorative only: separators that sit next to a surface change, never the sole boundary of a control. --c-line-2 IS a control boundary (outline buttons, the tap pad) so it must clear WCAG 1.4.11 non-text contrast of 3:1 against --c-bg. Measured 3.65:1. Do not lighten it. */ --c-line: #E2DCD3; /* hairline, decorative */ --c-line-2: #8A8075; /* control boundary, 3.65:1 on --c-bg */ /* ---- Colour: action --------------------------------------------------- One interactive colour for the whole app. Everything tappable that is not a rating uses this. Consistency is a memory aid. */ --c-primary: #0E7490; --c-primary-dark: #0A5A72; /* pressed */ --c-primary-soft: #E2F1F6; /* tinted background */ --c-on-primary: #FFFFFF; /* ---- Colour: rating --------------------------------------------------- The only other saturated colours in the app. Reserved exclusively for the caregiver rating bar so it is never mistaken for anything else. 'belum' is warm grey, never red. A person who just tried to speak and could not does not need a red light. */ --c-benar: #15803D; --c-benar-soft: #E7F3EB; --c-sebagian: #B45309; --c-sebagian-soft: #FBF0E1; --c-belum: #57534E; --c-belum-soft: #EFECE8; /* ---- Colour: pitch ---------------------------------------------------- MIT two-pitch notation. Tint only, never the sole carrier of meaning: vertical offset does that job. */ --c-pitch-hi: #0E7490; --c-pitch-lo: #6B645C; --c-focus: #0E7490; /* ---- Spacing ---------------------------------------------------------- Spacious scale. Low visual density is an accessibility requirement here, not a style preference. */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; /* ---- Touch targets ---------------------------------------------------- WCAG asks 44px. Post-stroke dexterity needs more. These are floors, not suggestions. --tap-gap is the minimum breathing room between any two adjacent targets. */ --tap-primary: 96px; --tap-rating: 88px; --tap-secondary: 72px; --tap-min: 56px; /* absolute floor, dashboard chrome only */ --tap-gap: 24px; /* ---- Typography ------------------------------------------------------- System font stack. No webfont, by decision: - the app must work fully offline, and a font request is a network call the privacy model does not allow - zero bytes, zero latency, no flash of unstyled text - Roboto on Android and SF Pro on iOS are both highly legible If a webfont is ever added it must be self-hosted, never from a CDN. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --t-caption: 16px; --t-label: 18px; --t-body: 20px; --t-instruction: 24px; --t-title: 32px; /* The practice screen must fit a 1024x768 tablet with no scrolling. The patient must never scroll to find the phrase, and the caregiver must never scroll to reach the rating bar. These three scale with viewport HEIGHT, not width, because height is the constrained axis. Coefficients are tuned so a tier-3 phrase (6 words, 9 syllables) still fits at 1024x768 with room to spare. They were originally larger and the practice area overflowed by 22px on exactly the phrases the content spec calls for. Raising any of these re-opens that bug: watch the live headroom readout in the M1 preview bar on index.html before changing them. It must stay positive at 1024x768 with a 9-syllable phrase. */ --t-syllable: clamp(20px, 4.0vh, 40px); --t-phrase: clamp(30px, 6.6vh, 72px); --phrase-icon: clamp(56px, 11vh, 140px); --pitch-offset: clamp(11px, 2.2vh, 26px); --practice-gap: clamp(10px, 1.9vh, 32px); --practice-pad: clamp(8px, 1.6vh, 28px); --body-pad: clamp(8px, 1.4vh, 24px); --lh-tight: 1.15; --lh-normal: 1.5; --lh-loose: 1.7; --fw-normal: 400; --fw-medium: 500; --fw-bold: 700; /* ---- Shape ------------------------------------------------------------ */ --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 24px; --r-full: 999px; /* Flat, one elevation level. No neumorphism: soft low-contrast shadow is precisely what low-vision and motor-impaired users cannot parse. */ --shadow: 0 1px 2px rgba(34, 32, 29, 0.06), 0 4px 12px rgba(34, 32, 29, 0.05); --shadow-press: 0 1px 2px rgba(34, 32, 29, 0.10); /* ---- Motion ----------------------------------------------------------- Short and functional. Motion only ever confirms a tap or marks the current syllable. Nothing decorative moves in this app. */ --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); /* ---- Layout ----------------------------------------------------------- */ --measure: 840px; /* content column cap */ --measure-wide: 1100px; /* dashboard only */ --bar-h: 140px; /* persistent bottom control bar */ } /* No dark theme, deliberately. A single consistent presentation is a memory aid for a patient with aphasia, and one palette means one set of contrast guarantees rather than two. Revisit only if evening glare turns out to be a real complaint in use. */ @media (prefers-contrast: more) { :root { --c-ink-2: #3A3630; --c-ink-3: #4A453E; --c-line: #C3BAAD; --c-line-2:#9C9184; } }