/* G-Empire Design System -- tokens (P2.3, refined under the approved G-EMPIRE VISUAL MASTER SPEC -- REVISION 2). Every color a component uses must be one of these semantic names. Themes only ever change the VALUES here, never component CSS. Naming note (Visual Master Spec conflict, resolved per its own Section 18 -- preserve business logic, implement the closest visual representation, report the conflict): the Spec's three Visual Themes are named Dark / Light / Mid-Light. This codebase's existing, already browser-verified AXS architecture (Axs/DisplayMode.cs: `enum AxsTheme { Light, Dark, Midnight }`) instead names its darkest, richest variant "Midnight" -- a deeper reading than "Mid-Light" suggests. Renaming the enum/serialized preference value was judged a real compatibility risk for no visual gain, so the three theme NAMES are kept exactly as they already ship; only their VALUES are replaced here with the Spec's palette. Dark below matches the Spec's own primary hex values exactly; Midnight is the same family pushed further (truer black, brighter gold) as G-Empire's most immersive variant; Light is refined to the same gold/geometry/typography identity on a light ground. */ /* Proxima Nova -- real brand typeface (design-mockups/erp branding delivery, 2026-09-24). Three width families (regular, Condensed, Extra Condensed), each with the weights actually delivered as .otf files; italics only exist where a matching file was delivered. */ @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-thin.otf'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-thin-italic.otf'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-regular.otf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-semibold.otf'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-semibold-italic.otf'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-bold.otf'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-bold-italic.otf'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-extrabold.otf'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-extrabold-italic.otf'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-black.otf'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova'; src: url('/fonts/proxima-nova/proxima-nova-black-italic.otf'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-thin.otf'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-thin-italic.otf'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-light.otf'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-light-italic.otf'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-regular.otf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-regular-italic.otf'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-semibold.otf'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-semibold-italic.otf'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-bold.otf'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-bold-italic.otf'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-extrabold.otf'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-extrabold-italic.otf'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-black.otf'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Condensed'; src: url('/fonts/proxima-nova/proxima-nova-condensed-black-italic.otf'); font-weight: 900; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-thin.otf'); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-thin-italic.otf'); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-light.otf'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-light-italic.otf'); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-regular.otf'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-regular-italic.otf'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-semibold.otf'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-semibold-italic.otf'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-bold.otf'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-bold-italic.otf'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-extrabold.otf'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-extrabold-italic.otf'); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-black.otf'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Proxima Nova Extra Condensed'; src: url('/fonts/proxima-nova/proxima-nova-extra-condensed-black-italic.otf'); font-weight: 900; font-style: italic; font-display: swap; } :root { /* type scale */ --text-xs: 11px; --line-xs: 1.4; --text-sm: 13px; --line-sm: 1.45; --text-base: 14px; --line-base: 1.5; --text-md: 15px; --line-md: 1.5; --text-lg: 17px; --line-lg: 1.4; --text-xl: 20px; --line-xl: 1.3; --text-2xl: 25px; --line-2xl: 1.25; --text-3xl: 32px; --line-3xl: 1.2; --text-4xl: 40px; --line-4xl: 1.15; /* spacing -- Visual Master Spec's 2/4/8/12/16/24/32/48 scale */ --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* radius -- UX/IA consolidation (2026-09-26): the mobile app is now the visual reference for the web ("one G-Empire system"), so corners soften from the earlier 0-2px enterprise geometry to a restrained version of the app's (it uses 14/18/20; Dynamic Mode keeps its own 8/14/20). Circular UI (avatars, status dots, spinners) still uses a literal 50%. */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* motion -- the mobile app's scale (lib/shared/motion.dart: fast 220ms, medium 380ms, easeOutCubic) shared by every page and both Experience Modes; .reduced-motion and prefers-reduced-motion switch it off. */ --motion-fast: 180ms; --motion-base: 260ms; --motion-slow: 380ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* elevation -- restrained 1px borders carry most separation; shadow stays a faint lift, never a decorative glow. */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32); --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.48); /* Proxima Nova (brand delivery, 2026-09-24) for normal UI, both heading and body, and for the brand wordmark -- the sole real brand typeface from here on, replacing the earlier Inter/Cinzel Decorative placeholders. JetBrains Mono stays for technical/numeric/status/ system data (ids, dates, metric figures, SLA/status chips), since the brand delivery includes no monospace face. Condensed/Extra Condensed widths are declared as their own families (--font-condensed / --font-extra-condensed) for dense UI (tables, chips) rather than forced onto every element. */ --font-heading: 'Proxima Nova', -apple-system, 'Segoe UI', sans-serif; --font-body: 'Proxima Nova', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --font-display: 'Proxima Nova', var(--font-heading); --font-condensed: 'Proxima Nova Condensed', var(--font-heading); --font-extra-condensed: 'Proxima Nova Extra Condensed', var(--font-heading); } /* ---------- Light ---------- */ :root, :root[data-theme="light"] { --surface: #f6f5f2; --surface-raised: #ffffff; --surface-overlay: #ffffff; --surface-sunken: #ece9e2; --border: #ded9cd; --border-strong: #c4bdac; --text-primary: #17150f; --text-secondary: #504a3c; --text-muted: #8b8272; --text-inverse: #ffffff; /* Brand delivery's COLORS.txt is a dark-first palette (near-black background) -- it names no light variant, so these accent values are the same brand gold hue (#edc919) darkened for on-white legibility, keeping the identical relationship the old placeholder gold already had between its Light and Dark accents. Everything else in Light is untouched by the brand delivery. */ --accent: #a6820c; --accent-strong: #8a6c09; --accent-soft: #f5ecc9; --accent-text-on: #17150f; --success: #3e7a5c; --success-soft: #e2eee7; --warning: #a3701f; --warning-soft: #f6ecd9; --danger: #a3402f; --danger-soft: #f5e2de; --info: #3d6a8f; --info-soft: #e2ebf1; --focus-ring: 0 0 0 3px rgba(166, 130, 12, 0.30); /* glass / depth (mobile app: translucent surface + light rim) */ --glass-fill: rgba(255, 255, 255, 0.74); --glass-bar: rgba(255, 255, 255, 0.82); --glass-border: rgba(23, 21, 15, 0.08); --glass-highlight: rgba(255, 255, 255, 0.65); --ambient-glow: rgba(166, 130, 12, 0.07); --shadow-lift: 0 14px 34px rgba(23, 21, 15, 0.12), 0 3px 8px rgba(23, 21, 15, 0.08); --search-fill: var(--surface); } /* ---------- Dark -- the brand delivery's COLORS.txt applied verbatim (background/surface/text/success/warning/danger match its hex exactly; accent updated to its brighter gold; surface-overlay/sunken and border are the one elevation tier the file doesn't break out, kept proportional to the new surface as they already were to the old one). ---------- */ :root[data-theme="dark"] { --surface: #080809; /* Background */ --surface-raised: #1b1b1b; /* Surface */ --surface-overlay: #222222; /* Elevated */ --surface-sunken: #050506; --border: #1e2026; --border-strong: #2c2f37; --text-primary: #f4f4f6; /* Text primary */ --text-secondary: #8a8d93; /* Text muted */ --text-muted: #5a5d63; --text-inverse: #080809; --accent: #edc919; /* Accent */ --accent-strong: #ffe566; /* Accent strong */ --accent-soft: #3b3206; --accent-text-on: #14110a; /* Semantic status accents -- match COLORS.txt exactly. */ --success: #4a9b7a; --success-soft: #15251d; --warning: #c2872f; --warning-soft: #2e2414; --danger: #b5524a; --danger-soft: #2a1815; --info: #6e8aa8; --info-soft: #191f26; --focus-ring: 0 0 0 3px rgba(237, 201, 25, 0.35); --glass-fill: rgba(27, 27, 27, 0.62); --glass-bar: rgba(20, 20, 21, 0.78); --glass-border: rgba(255, 255, 255, 0.07); --glass-highlight: rgba(255, 255, 255, 0.035); --ambient-glow: rgba(237, 201, 25, 0.06); --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4); --search-fill: var(--surface-overlay); } /* ---------- Midnight -- the same family, pushed to G-Empire's deepest, most immersive variant (truer black canvas, brighter gold for contrast against it). ---------- */ :root[data-theme="midnight"] { --surface: #030304; --surface-raised: #131313; --surface-overlay: #191919; --surface-sunken: #000000; --border: #17181d; --border-strong: #24262d; --text-primary: #f6f6f8; --text-secondary: #94979d; --text-muted: #605f66; --text-inverse: #030304; --accent: #f5d633; --accent-strong: #fff08a; --accent-soft: #453a08; --accent-text-on: #0e0b06; --success: #55ab89; --success-soft: #12211a; --warning: #d29a44; --warning-soft: #2a2113; --danger: #c56159; --danger-soft: #291613; --info: #7d98b5; --info-soft: #161c23; --focus-ring: 0 0 0 3px rgba(245, 214, 51, 0.38); --glass-fill: rgba(19, 19, 19, 0.62); --glass-bar: rgba(12, 12, 13, 0.8); --glass-border: rgba(255, 255, 255, 0.06); --glass-highlight: rgba(255, 255, 255, 0.03); --ambient-glow: rgba(245, 214, 51, 0.06); --shadow-lift: 0 18px 44px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.45); --search-fill: var(--surface-overlay); } /* System preference fallback when the user hasn't explicitly chosen. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --surface: #080809; --surface-raised: #1b1b1b; --surface-overlay: #222222; --surface-sunken: #050506; --border: #1e2026; --border-strong: #2c2f37; --text-primary: #f4f4f6; --text-secondary: #8a8d93; --text-muted: #5a5d63; --text-inverse: #080809; --accent: #edc919; --accent-strong: #ffe566; --accent-soft: #3b3206; --accent-text-on: #14110a; --success: #4a9b7a; --success-soft: #15251d; --warning: #c2872f; --warning-soft: #2e2414; --danger: #b5524a; --danger-soft: #2a1815; --info: #6e8aa8; --info-soft: #191f26; --focus-ring: 0 0 0 3px rgba(237, 201, 25, 0.35); --glass-fill: rgba(27, 27, 27, 0.62); --glass-bar: rgba(20, 20, 21, 0.78); --glass-border: rgba(255, 255, 255, 0.07); --glass-highlight: rgba(255, 255, 255, 0.035); --ambient-glow: rgba(237, 201, 25, 0.06); --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4); --search-fill: var(--surface-overlay); } }