/* ============================================================= WG Futures app — brand design tokens SINGLE SOURCE OF TRUTH for colour, type, shape and spacing. Token NAMES are deliberately identical to gmfj-app and talentxp-app, so assets/css/app.css and components.css port across unchanged. Only the VALUES differ. Re-skinning the shell means editing this file and nothing else. Palette taken from the FlutterFlow export (lib/flutter_flow/flutter_flow_theme.dart, LightModeTheme): russianViolet #3B2150 primaryBackground purple #833F91 secondaryBackground asparagus #79992A secondary saffron #E6C54F tertiary orangePeel #F9A02A glaucous #7477B8 lineColor #503053 alternate #E0E3E7 magenta #EA63FF (bottom-nav unselected, main.dart:198) ============================================================= */ /* ---- Web fonts (self-hosted; no runtime request to a font CDN) ---- The export ships Roboto-Regular only. Medium/Bold are declared so the type scale is honest about what it wants; until the binaries are added the browser synthesises them from Regular. See README "Asset TODOs". */ @font-face { font-family: "Roboto"; src: url("../fonts/Roboto-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } /* Material Icons — SELF-HOSTED (was a fonts.googleapis.com CDN link). Bundling it means the icons render offline and on locked-down networks; a missing icon font showed ligature words ("school", "place") instead, which broke the card layout. */ @font-face { font-family: "Material Icons"; src: url("../fonts/material-icons.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: block; /* block, not swap: never flash the ligature word before the font loads */ } .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; -webkit-font-feature-settings: "liga"; font-feature-settings: "liga"; /* turn the ligature name into the glyph */ -webkit-font-smoothing: antialiased; } :root { /* ---- Core ---- */ --russian-violet: #3b2150; /* primary background — the WG Futures colour */ --purple: #833f91; /* secondary background */ --line-violet: #503053; /* dividers on violet */ --violet-deep: #241432; /* derived: darker than russian-violet, for depth */ --violet-raised: #4a2b63; /* derived: raised surface on violet */ --pale-grey: #e0e3e7; /* "alternate" — selected nav, light dividers */ --magenta: #ea63ff; /* nav unselected */ /* ---- Named palette (components reference these directly) ---- */ --purple-300: #833f91; --dark-purple-400: #3b2150; --deep-pink-50: #fbe9ff; --deep-pink-200: #f3b8ff; --deep-pink-600: #b83fcc; --pink-100: #f7d4ff; --indigo-300: #7477b8; /* glaucous */ --soft-blue-200: #b9bbdc; --light-blue-100: #dfe0f1; --aqua-300: #7fc5bd; --teal-200: #a8d8d2; --mint-100: #d9ece9; --amber-300: #e6c54f; /* saffron */ --tangerine-400: #f9a02a; /* orange peel */ --coral-100: #ffd9c9; --red-200: #ff9ba3; --primary-100: #eef2e3; /* asparagus, tinted */ --secondary-200: #b9cc8a; /* asparagus, lighter */ /* ---- Semantic aliases (USE THESE in components) ---- */ --background: #f4f2f6; /* page behind the phone canvas */ --surface: #ffffff; /* cards */ --surface-alt: #faf9fb; /* canvas */ --surface-soft: #f1ecf4; /* wells, tracks, selected rows */ --text: #14181b; /* primaryText */ --text-strong: #0b0d0f; --text-muted: #57636c; /* secondaryText */ --line: #e3dee8; /* Inverted surface — a dark chip that ALWAYS carries light text: toasts, the dark button, the offline banner. Defined in both themes (see the dark block) so it can never resolve to light-on-light or dark-on-dark. NEVER put white text on --primary-100 (a near-white tint); use this instead. */ --inverse-surface: #241432; /* violet-deep — on-brand, dark enough for white text */ --inverse-text: #ffffff; /* Link/inline-action ink. --indigo-300 (#7477b8) is 4.13:1 on white, which fails the 4.5:1 small-text threshold — and every inline action in this app ("See all", "New", "Invite", "Mark all read") is small bold text. Same glaucous hue, darkened to 6.4:1. */ --link-ink: #5558a0; --brand-accent: var(--purple); --brand-accent-soft: #f3eaf6; --brand-cta: var(--asparagus, #79992a); --brand-cta-warm: var(--tangerine-400); --brand-ink: var(--russian-violet); --asparagus: #79992a; --success: #249689; --warning: #f9cf58; --error: #ff5963; --info: #7477b8; /* Signature gradient — violet into purple, the app's header/hero treatment */ --brand-gradient: linear-gradient(135deg, #3b2150 0%, #833f91 100%); --brand-gradient-warm: linear-gradient(135deg, #833f91 0%, #f9a02a 100%); /* ---- Type ---- */ --font-display: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; --font-body: "Roboto", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display-weight: 700; /* Fluid scale — same clamp() shape as the sibling apps */ --fnt-display-1: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); --fnt-display-2: clamp(1.65rem, 1.3rem + 1.6vw, 2.25rem); --fnt-h1: clamp(1.5rem, 1.25rem + 1.1vw, 1.95rem); --fnt-h2: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem); --fnt-h3: clamp(1.1rem, 1rem + 0.4vw, 1.25rem); --fnt-h4: 1rem; --fnt-body: 0.975rem; --fnt-small: 0.85rem; /* ---- Shape / spacing / elevation ---- */ --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --shadow-sm: 0 1px 2px rgba(35, 18, 48, .08); --shadow-md: 0 4px 14px rgba(35, 18, 48, .10); --shadow-lg: 0 12px 32px rgba(35, 18, 48, .16); /* ---- App shell metrics ---- */ --app-max: 480px; /* phone canvas width; centred on desktop */ --header-h: 56px; --bottomnav-h: 64px; } /* ============================================================= Dark theme. The app's own chrome is already violet, so dark mode deepens the surfaces rather than inverting the brand. ============================================================= */ :root[data-theme="dark"] { --background: #150c1d; --surface: #241432; /* violet-deep */ --surface-alt: #1c1026; --surface-soft: #33204429; --text: #f4f1f7; --text-strong: #ffffff; --text-muted: #b7a8c4; --line: #503053; /* lineColor */ /* Inverted surface flips on dark: a LIGHT chip with dark text, so a toast still stands out against the dark app instead of vanishing into it. */ --inverse-surface: #f1ecf4; --inverse-text: #14181b; --brand-accent: #a95cb8; --brand-accent-soft: #332044; --brand-ink: #f4f1f7; --link-ink: #b9bbdc; /* 9.2:1 on the dark surface */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); } /* Bottom nav is violet in BOTH themes — it is brand furniture, not surface. DELIBERATE DEVIATION from main.dart:196-198, which set unselected = magenta #EA63FF and selected = pale grey. Reproduced faithfully, that inverts the hierarchy: four saturated magenta tabs pull the eye far harder than one near-white one, so the tab you are ON reads as the least important thing in the bar. Both values passed contrast — the problem was never contrast, it was that colour was doing the opposite of its job. Inactive now recedes (60% white on violet, 5.8:1) and active comes forward (pure white, 13.4:1). Magenta is kept as the ACCENT on the active indicator, so the brand colour still appears in the bar but is spent on the one item that matters. */ :root { --nav-bg: var(--russian-violet); --nav-active: #ffffff; --nav-inactive: rgba(255, 255, 255, 0.60); --nav-indicator: var(--magenta); }