/* ============================================================ RAN — visual design system (UI/UX only) Same structural design language as eidiki-ekpaideysi/fonologiki- epignosi (rounded cards, pill buttons, soft shadows, generous spacing, Outfit/Nunito typography) — recolored to a calmer, more professional palette: soft light-blue as the primary/brand accent, soft earthy sand/ochre/sage as secondary accents. Deliberately WITHOUT fonologiki-epignosi's game-specific decoration (no bounce/ confetti animations, no floating background shapes, no mascots, no gradient buttons with colored glow) — RAN is an assessment tool for educators, not a child-facing game, and Measurement Mode has a separately re-approved requirement to stay free of any decoration/ animation around the stimuli. IMPORTANT — this file is presentation only. It must never be the place status is communicated by color alone (every status pairs a color with an icon + text elsewhere in the DOM), and it must never change the fixed dimensions/spacing of .ran-stimulus/.ran-timed- matrix — those numbers are part of the scientific presentation, not decoration, and are deliberately left untouched here. The 5 Colors stimulus hex values (RED/BLUE/GREEN/YELLOW/BLACK) are the scientific stimulus signal, not decoration — never altered here. Measurement Mode (.ran-measurement-mode, toggled on only for renderTimedRunning): background flips to a near-white neutral and every decorative element (blobs, stepper, branding) is simply never rendered into that screen's DOM — not hidden via CSS, actually absent — so there is no chance of a stray decorative element leaking into the child-facing measurement surface. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@600;700;800&family=Nunito:wght@400;600;700;800&family=Atkinson+Hyperlegible:wght@700&subset=greek&display=swap'); :root { --ran-bg: #F5F8F9; --ran-card: #FFFFFF; /* Primary — soft light-blue (brand/interactive accent) */ --ran-blue: #6FA0C4; --ran-blue-dark: #3E6D8F; --ran-blue-pale: #E4EFF5; /* Secondary — soft earthy tones */ --ran-sand: #C9A47C; --ran-ochre: #D9B36C; --ran-ochre-dark: #8C6A38; --ran-sage: #8FAD97; --ran-sage-dark: #4C6B57; --ran-text: #2E3D46; --ran-text-muted: #57707A; --ran-border: #DCE4E8; /* A deeper, still-earthy terracotta-red for the small number of true danger/terminate actions — never a jarring pure red. Verified ≥5:1 contrast with white/cream text. */ --ran-danger: #B15A45; --ran-danger-dark: #954A38; /* Pale tints for status banners — always paired with a dark, already-contrast-checked text token, never used as text color themselves. */ --ran-ok-bg: #EAF3EE; --ran-ok-border: var(--ran-sage); --ran-ok-text: var(--ran-sage-dark); --ran-flagged-bg: #FAF1DE; --ran-flagged-border: var(--ran-ochre); --ran-flagged-text: var(--ran-ochre-dark); --ran-invalid-bg: #F5EAE3; --ran-invalid-border: var(--ran-sand); --ran-invalid-text: var(--ran-danger-dark); --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --shadow-soft: 0 2px 10px rgba(46, 61, 70, 0.07); --shadow-soft-hover: 0 6px 18px rgba(46, 61, 70, 0.11); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --font-heading: 'Outfit', 'Segoe UI', sans-serif; --font-body: 'Nunito', 'Segoe UI', Arial, sans-serif; /* Item 25 (approved): RAN digit STIMULI only — never the global/ interface font, which stays Outfit everywhere else (headings, buttons, every other UI element, including this variable's own fallback chain here). Chosen for clearer glyph differentiation of the digits themselves (Outfit's "1" is a bare vertical stroke with no flag/base serif) — not presented as a dyslexia/ diagnostic-accommodation font or as scientifically superior for RAN, just a clearer digit rendering. Falls back to --font-heading (Outfit) if the webfont fails to load, same fallback pattern as every other font token here. */ --font-digit: 'Atkinson Hyperlegible', var(--font-heading); --transition-fast: 150ms ease; } * { box-sizing: border-box; } /* Mobile touch fix: every real click target in this app is a