/* ============================================================ CADRIXO — Colors & Type tokens Source of truth: MassFlow/app/lib/core/theme/app_colors.dart + docs/audit/08-branding/DECISIONS.md Palette retenue: C — Hybride B+A (Indigo 900 + Orange sécurité) ============================================================ */ /* Fonts used by the brand: - Body + headings: DM Sans (Google Fonts) - Editorial / onboarding moment: Fraunces (Google Fonts, italic 600 for the « C » mark) - Wordmark "CADRIXO": Verdana (native stack, NEVER Google Fonts) Load in HTML with: */ :root { /* ── Primary — Indigo 900 ───────────────────────────────── */ --cx-primary: #1E3A8A; /* brand, navigation, titles, primary icons */ --cx-primary-soft: #DBEAFE; /* hover, selected, badge backgrounds */ --cx-primary-strong: #6366F1; /* lighter secondary (charts, secondary badges) */ --cx-primary-dark: #93C5FD; /* primary inverted on dark surface */ --cx-on-primary: #FFFFFF; /* ── Accent — Orange sécurité (jobsite CTAs only) ───────── */ --cx-accent: #F26B1F; /* punch-in, create estimate, FAB, main field action */ --cx-accent-soft: #FFE4D6; --cx-on-accent: #FFFFFF; /* ── Surfaces (light) ───────────────────────────────────── */ --cx-canvas: #F8FAFC; /* page background */ --cx-surface: #FFFFFF; /* cards, sidebar, sheets */ --cx-ink: #0F172A; /* main text, 16:1 on white */ --cx-ink-muted: #475569; /* secondary text, 7.6:1 AAA */ --cx-ink-subtle: #64748B; /* tertiary / placeholder */ --cx-ink-faint: #94A3B8; /* section labels, disabled */ --cx-hairline: #E2E8F0; /* thin borders, dividers */ --cx-hairline-soft: #F1F5F9; /* very soft separators, zebras */ /* ── Surfaces (dark) ────────────────────────────────────── */ --cx-canvas-dark: #0F172A; --cx-surface-dark: #1E293B; --cx-ink-dark: #F1F5F9; --cx-ink-muted-dark: #94A3B8; --cx-hairline-dark: #334155; /* ── Semantic ───────────────────────────────────────────── */ --cx-success: #15803D; /* Green 700 (AA) */ --cx-success-soft: #DCFCE7; --cx-warning: #A16207; /* Yellow 700 (AA) */ --cx-warning-soft: #FEF3C7; --cx-danger: #B91C1C; /* Red 700 (AA) */ --cx-danger-soft: #FEE2E2; --cx-info: #0369A1; /* Sky 700 (AA) */ --cx-info-soft: #E0F2FE; /* ── Ivoire editorial (onboarding only) ─────────────────── */ --cx-ivory: #FAF8F3; --cx-ivory-ink: #0B0B0C; --cx-ivory-hairline: #E5E1DC; --cx-ivory-accent: #F59E0B; /* onboarding keeps amber */ /* ── Type families ──────────────────────────────────────── */ --cx-font-sans: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --cx-font-serif: "Fraunces", Georgia, "Times New Roman", serif; --cx-font-logo: Verdana, Geneva, Tahoma, sans-serif; /* CADRIXO wordmark — native stack */ --cx-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* ── Type scale (DM Sans) ───────────────────────────────── */ --cx-fs-display-lg: 32px; --cx-fw-display-lg: 700; --cx-fs-display-md: 28px; --cx-fw-display-md: 700; --cx-fs-headline-lg: 24px; --cx-fw-headline-lg: 600; --cx-fs-headline-md: 22px; --cx-fw-headline-md: 600; --cx-fs-title-lg: 20px; --cx-fw-title-lg: 600; --cx-fs-title-md: 18px; --cx-fw-title-md: 600; --cx-fs-title-sm: 16px; --cx-fw-title-sm: 600; --cx-fs-body-lg: 16px; --cx-fw-body-lg: 400; /* 16pt = jobsite readable */ --cx-fs-body-md: 14px; --cx-fw-body-md: 400; /* app minimum */ --cx-fs-label-lg: 14px; --cx-fw-label-lg: 500; --cx-fs-label-md: 13px; --cx-fw-label-md: 500; --cx-fs-caption: 12px; --cx-fw-caption: 400; /* badges/metadata only */ --cx-lh-tight: 1.15; --cx-lh-snug: 1.3; --cx-lh-normal: 1.5; /* ── Logo wordmark ──────────────────────────────────────── */ --cx-logo-weight: 700; --cx-logo-letter: 3px; /* Verdana CADRIXO uppercase */ /* ── Radii ──────────────────────────────────────────────── */ --cx-radius-xs: 4px; --cx-radius-sm: 6px; --cx-radius-md: 8px; /* buttons, inputs */ --cx-radius-lg: 10px; /* icon pills, nav items */ --cx-radius-xl: 12px; /* cards, KPI tiles */ --cx-radius-2xl: 16px; /* hero panels */ --cx-radius-pill: 999px; /* ── Spacing (4pt grid) ─────────────────────────────────── */ --cx-space-1: 4px; --cx-space-2: 8px; --cx-space-3: 12px; --cx-space-4: 16px; --cx-space-5: 20px; --cx-space-6: 24px; --cx-space-8: 32px; --cx-space-10: 40px; --cx-space-12: 48px; --cx-space-16: 64px; /* ── Elevation ──────────────────────────────────────────── */ --cx-shadow-0: none; --cx-shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03); --cx-shadow-2: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --cx-shadow-3: 0 6px 16px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --cx-shadow-4: 0 14px 32px rgba(15, 23, 42, 0.12), 0 4px 8px rgba(15, 23, 42, 0.06); --cx-shadow-focus: 0 0 0 3px rgba(30, 58, 138, 0.18); /* Minimum jobsite hit target */ --cx-tap-min: 48px; /* Motion */ --cx-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --cx-dur-fast: 120ms; --cx-dur-base: 200ms; --cx-dur-slow: 320ms; } /* ============================================================ Semantic element styles ============================================================ */ body { font-family: var(--cx-font-sans); font-size: var(--cx-fs-body-md); line-height: var(--cx-lh-normal); color: var(--cx-ink); background: var(--cx-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1 { font-size: var(--cx-fs-display-md); font-weight: var(--cx-fw-display-md); line-height: var(--cx-lh-tight); letter-spacing: -0.01em; margin: 0; } h2 { font-size: var(--cx-fs-headline-lg); font-weight: var(--cx-fw-headline-lg); line-height: var(--cx-lh-snug); margin: 0; } h3 { font-size: var(--cx-fs-title-lg); font-weight: var(--cx-fw-title-lg); line-height: var(--cx-lh-snug); margin: 0; } h4 { font-size: var(--cx-fs-title-md); font-weight: var(--cx-fw-title-md); line-height: var(--cx-lh-snug); margin: 0; } h5 { font-size: var(--cx-fs-title-sm); font-weight: var(--cx-fw-title-sm); margin: 0; } p { margin: 0; font-size: var(--cx-fs-body-md); color: var(--cx-ink); } small, .caption { font-size: var(--cx-fs-caption); color: var(--cx-ink-muted); } .eyebrow { font-size: 11px; font-weight: 700; color: var(--cx-ink-faint); letter-spacing: 1.2px; text-transform: uppercase; } .cx-wordmark { font-family: var(--cx-font-logo); font-weight: var(--cx-logo-weight); letter-spacing: var(--cx-logo-letter); text-transform: uppercase; } .cx-editorial-title { font-family: var(--cx-font-serif); font-weight: 500; font-style: normal; letter-spacing: -0.01em; line-height: 1.1; } code, kbd, pre { font-family: var(--cx-font-mono); } /* Focus ring — all interactive elements */ :where(button, a, input, select, textarea, [role="button"]):focus-visible { outline: none; box-shadow: var(--cx-shadow-focus); border-radius: var(--cx-radius-md); }