/* * Gapfy brand tokens. * * Single source of truth for colour, typography, radius, spacing and * shadows across the Gapfy product family (Website, Maestro, Harmony). * Other apps copy this file verbatim and override individual variables * inside their own component scopes when they need to deviate. * * Palette derived from the canonical Gapfy logo: * - Icon background: #3DA6DD (sky/cyan blue, official brand) * - Wordmark: #1A1A1A (near-black) * * Display family: Inter (loaded from Google Fonts in App.razor). * Inspired by the Atlassian product family layout: deep ink for body * copy, brand blue used sparingly for highlights and primary CTAs. */ :root { /* Primary palette - the logo icon blue */ --gapfy-primary: #3DA6DD; --gapfy-primary-strong: #2A8BC4; --gapfy-primary-soft: #E5F3FB; --gapfy-accent: #1A78B0; --gapfy-accent-strong: #0F5B8A; /* Action palette - the colour used for interactive UI surfaces (primary CTAs, sidebar active states, focus halos, tab underlines). Separated from the brand cyan so the logo stays vibrant while the platform reads as professional. Slate-800 family (Tailwind). */ --gapfy-action: #1F2937; --gapfy-action-strong: #111827; --gapfy-action-darker: #030712; --gapfy-action-soft: #F1F5F9; --gapfy-action-on: #FFFFFF; /* Neutrals - Atlassian-style deep navy ink + supporting greys */ --gapfy-ink: #172B4D; --gapfy-ink-soft: #344563; --gapfy-ink-deep: #091E42; --gapfy-muted: #5E6C84; --gapfy-line: #DFE1E6; --gapfy-line-strong: #C1C7D0; /* Surfaces */ --gapfy-bg: #FFFFFF; --gapfy-bg-soft: #F4F5F7; --gapfy-bg-elevated: #FFFFFF; --gapfy-bg-tint: #DEEBFF; --gapfy-navbar-bg: rgba(255, 255, 255, 0.92); /* Status */ --gapfy-success: #16A34A; --gapfy-warning: #F59E0B; --gapfy-danger: #DC2626; /* Typography - Inter with system fallbacks */ --gapfy-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --gapfy-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --gapfy-text-xs: 0.75rem; --gapfy-text-sm: 0.875rem; --gapfy-text-base: 1rem; --gapfy-text-lg: 1.125rem; --gapfy-text-xl: 1.25rem; --gapfy-text-2xl: 1.5rem; --gapfy-text-3xl: 1.875rem; --gapfy-text-4xl: 2.5rem; --gapfy-text-5xl: 3.25rem; --gapfy-text-6xl: 4rem; /* Radius - smaller, more rectangular like Atlassian */ --gapfy-radius-sm: 3px; --gapfy-radius: 6px; --gapfy-radius-lg: 12px; --gapfy-radius-xl: 20px; --gapfy-radius-pill: 9999px; /* Elevation - rgba uses ink-deep (#091E42 = 9,30,66) for tonal consistency */ --gapfy-shadow-sm: 0 1px 2px rgba(9, 30, 66, 0.08); --gapfy-shadow: 0 4px 12px rgba(9, 30, 66, 0.10); --gapfy-shadow-lg: 0 20px 48px rgba(9, 30, 66, 0.18); /* Gradients - lighter -> primary -> deeper for hero washes */ --gapfy-gradient-primary: linear-gradient(135deg, #5DB9E8 0%, #3DA6DD 50%, #2A8BC4 100%); --gapfy-gradient-surface: linear-gradient(180deg, #F4F5F7 0%, #FFFFFF 100%); /* Layout */ --gapfy-container-max: 1240px; --gapfy-header-height: 72px; } /* ============================================================ Dark mode tokens. Single source of truth shared with the Website brand.css and the Harmony.WebApp brand.css. The Radzen material-dark theme covers Radzen widgets; these overrides cover the custom CSS in app.css and any module-specific stylesheets. Two activation paths: 1. Explicit user choice -> (App.razor reads the gapfy.theme cookie and writes the class on SSR). 2. OS preference fallback when no cookie set -> @media query. Keep the two blocks in sync. ============================================================ */ :root.theme-dark { color-scheme: dark; --gapfy-primary-soft: #102E45; --gapfy-ink: #E6EDF3; --gapfy-ink-soft: #B8C5D3; --gapfy-ink-deep: #050B14; --gapfy-muted: #8B97AB; --gapfy-line: #243149; --gapfy-line-strong: #324569; --gapfy-bg: #0F1419; --gapfy-bg-soft: #161D26; --gapfy-bg-elevated: #1C2530; --gapfy-bg-tint: #0F2840; --gapfy-navbar-bg: rgba(15, 20, 25, 0.88); --gapfy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50); --gapfy-shadow: 0 4px 12px rgba(0, 0, 0, 0.55); --gapfy-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65); --gapfy-gradient-surface: linear-gradient(180deg, #0B1016 0%, #161D26 100%); /* Action in dark: slate flips light. White-on-dark CTAs read clearly, text inside the button switches to dark ink so contrast holds. */ --gapfy-action: #E2E8F0; --gapfy-action-strong: #F1F5F9; --gapfy-action-darker: #FFFFFF; --gapfy-action-soft: #1E293B; --gapfy-action-on: #0F172A; } @media (prefers-color-scheme: dark) { :root:not(.theme-light):not(.theme-dark) { color-scheme: dark; --gapfy-primary-soft: #102E45; --gapfy-ink: #E6EDF3; --gapfy-ink-soft: #B8C5D3; --gapfy-ink-deep: #050B14; --gapfy-muted: #8B97AB; --gapfy-line: #243149; --gapfy-line-strong: #324569; --gapfy-bg: #0F1419; --gapfy-bg-soft: #161D26; --gapfy-bg-elevated: #1C2530; --gapfy-bg-tint: #0F2840; --gapfy-navbar-bg: rgba(15, 20, 25, 0.88); --gapfy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.50); --gapfy-shadow: 0 4px 12px rgba(0, 0, 0, 0.55); --gapfy-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.65); --gapfy-gradient-surface: linear-gradient(180deg, #0B1016 0%, #161D26 100%); --gapfy-action: #E2E8F0; --gapfy-action-strong: #F1F5F9; --gapfy-action-darker: #FFFFFF; --gapfy-action-soft: #1E293B; --gapfy-action-on: #0F172A; } }