/* webapp/static/tokens.css * sdd/ui-professional-redesign — design tokens, layer 1 (primitive) + layer 2 * (semantic). Templates and app.css MUST reference only the semantic layer * (design.md A3) — primitives stay swappable underneath. Owner-confirmed * navy/blue palette (sdd/ui-professional-redesign/tasks). * * frontend-redesign-v2 WU1 additions: --color-brand (emphasis-only accent, * distinct from the navy chrome; sdd/evir-rebranding retargeted it from the * former blue highlight accent to the e-VIR lime three-value set), a * 3-level navy-tinted elevation scale, a * --font-sans var (self-hosted Lexend + system fallback), and motion * primitives for the narrow micro-interaction policy (150-250ms) that WU1 * introduces in app.css. This file still declares no motion rules itself — * only the duration/easing values that app.css consumes. */ :root { /* --- Primitives: color --- */ --c-navy-900: #0F2138; --c-navy-800: #123059; --c-navy-700: #1C4677; --c-navy-600: #2A5C99; --c-navy-100: #DCE6F2; --c-gray-50: #F8FAFC; --c-gray-100: #F1F5F9; --c-gray-200: #E2E8F0; --c-gray-300: #CBD5E1; --c-gray-400: #94A3B8; --c-gray-500: #64748B; --c-gray-600: #475569; --c-gray-700: #334155; --c-gray-800: #1E293B; --c-gray-900: #0F172A; --c-green-700: #1E7A46; --c-green-100: #E3F3EA; --c-amber-800: #92620A; --c-amber-100: #FBF0DD; --c-red-700: #B3261E; --c-red-100: #FBE7E6; /* Brand accent (sdd/evir-rebranding) — the e-VIR lime. --c-lime-500 is the * identity colour and measures 1.55:1 on white: it is legal ONLY on the navy * chrome. --c-lime-800 is the light-surface ink (7.08:1 on #FFF). * --c-lime-100 is a decorative wash and is NEVER an indicator on its own. */ --c-lime-500: #A6E22E; --c-lime-800: #3F6212; --c-lime-100: #ECFCCB; /* --- Primitives: space --- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; /* --- Primitives: type --- */ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; /* --- Primitives: radius / border --- */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --bw-1: 1px; /* --- Primitives: motion (frontend-redesign-v2 WU1) --- * Narrow micro-interaction policy only. app.css applies these; no * scroll/page-load choreography anywhere. prefers-reduced-motion collapses * them (see app.css). */ --motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 250ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* --- Primitives: elevation (frontend-redesign-v2 WU1) --- * Subtle, navy-tinted (never pure black). sm = raised card, md = dropdown / * popover, lg = modal / side panel. Channels are derived from --c-navy-900 * via relative-color syntax so the tint tracks any palette change. */ --shadow-sm: 0 1px 2px rgb(from var(--c-navy-900) r g b / 0.06), 0 1px 3px rgb(from var(--c-navy-900) r g b / 0.10); --shadow-md: 0 4px 10px rgb(from var(--c-navy-900) r g b / 0.10), 0 2px 4px rgb(from var(--c-navy-900) r g b / 0.06); --shadow-lg: 0 14px 32px rgb(from var(--c-navy-900) r g b / 0.14), 0 6px 12px rgb(from var(--c-navy-900) r g b / 0.08); /* --- Semantic: the only layer templates/app.css may reference --- */ --color-bg: var(--c-gray-50); --color-surface: #FFFFFF; --color-text: var(--c-gray-900); --color-text-muted: var(--c-gray-600); --color-border: var(--c-gray-300); --color-primary: var(--c-navy-700); --color-primary-dark: var(--c-navy-800); --color-primary-darker: var(--c-navy-900); --color-primary-contrast: #FFFFFF; --color-primary-tint: var(--c-navy-100); /* Brand accent (sdd/evir-rebranding; replaces the retired blue highlight * accent tokens). Navy = structure/chrome; brand = e-VIR identity + * "look here". CONTRAST CONTRACT: * --color-brand lime — ONLY on --c-navy-900/-800 (10.4:1) * --color-brand-ink light-surface value: text, borders, accent-color, * bar fills (7.08:1 on #FFF, 6.76:1 on --color-bg) * --color-brand-tint decorative wash ONLY (1.08:1 on white) * --color-brand-contrast foreground ON --color-brand (white fails 1.55:1) */ --color-brand: var(--c-lime-500); --color-brand-ink: var(--c-lime-800); --color-brand-tint: var(--c-lime-100); --color-brand-contrast: var(--c-navy-900); /* Type family (frontend-redesign-v2 WU1) — self-hosted Lexend, then the * original system stack as fallback (@font-face lives in app.css). */ --font-sans: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --color-success: var(--c-green-700); --color-success-bg: var(--c-green-100); --color-warning: var(--c-amber-800); --color-warning-bg: var(--c-amber-100); --color-danger: var(--c-red-700); --color-danger-bg: var(--c-red-100); /* Neutral outcome — "no verdict / baseline" (frontend-redesign-v2 follow-up). * The 4th status role, paired with success/warning/danger. Reuses existing * gray primitives — palette stays navy/blue/gray/green/amber/red only. */ --color-neutral: var(--c-gray-600); --color-neutral-bg: var(--c-gray-100); --color-focus: var(--c-navy-700); --color-skeleton: var(--c-gray-200); /* --- Semantic: role badges (sdd/ui-professional-redesign Phase 11 closeout) --- * Reuses existing primitives only (no new hues) — owner-confirmed palette * stays navy/blue/gray/green/amber/red only (see home.html header comment). * Distinct from the status tokens above (success/warning/danger convey * outcome; these convey identity/role and must not be conflated with them). */ --color-role-admin: var(--c-navy-700); --color-role-admin-bg: var(--c-navy-100); --color-role-operador: var(--c-amber-800); --color-role-operador-bg: var(--c-amber-100); --color-role-viewer: var(--c-gray-600); --color-role-viewer-bg: var(--c-gray-100); --color-role-investor: var(--c-green-700); --color-role-investor-bg: var(--c-green-100); }