/* ============================================================ SeizeControl · FNDConnect — Canonical design tokens ------------------------------------------------------------ Single source of truth for colour, type, space, radius and elevation. Aligns with FND Connect brand (navy + magenta). Load BEFORE every theme stylesheet. ============================================================ */ :root { /* ── Brand ─────────────────────────────────────────────── */ --fnd-navy: #002b5f; --fnd-deep-navy: #001a3b; --fnd-navy-mid: #104778; --fnd-magenta: #c9005a; --fnd-magenta-hover: #a8004a; --fnd-rose: #ed2b7b; --fnd-pale: #fff1f7; --fnd-magenta-bg: #fff7fb; --fnd-blue-pale: #eef4fb; --fnd-blue-soft: #edf5fc; /* ── Status ────────────────────────────────────────────── */ --fnd-success: #0f7a4c; --fnd-success-bg: #e8f6ef; --fnd-warning: #9a6700; --fnd-warning-bg: #fff6e0; --fnd-danger: #b42318; --fnd-danger-bg: #fdecea; --fnd-info: #1f5f99; --fnd-info-bg: #e8f1f9; /* ── Surfaces ──────────────────────────────────────────── */ --fnd-page: #f5f7fa; --fnd-white: #ffffff; --bg: var(--fnd-page); --surface: var(--fnd-white); --surface-alt: #fbfcfe; --surface-muted: var(--fnd-blue-pale); --surface-raised: var(--fnd-white); /* ── Text ──────────────────────────────────────────────── */ --fnd-ink: #152238; --fnd-text: #26364d; --fnd-muted: #5f6f84; --fnd-faint: #8a97a8; --ink: var(--fnd-ink); --ink-soft: var(--fnd-muted); --ink-faint: var(--fnd-faint); --ink-disabled: #a3afbd; --text: var(--fnd-text); /* ── Lines ─────────────────────────────────────────────── */ --fnd-border: #dde4ec; --fnd-border-strong: #c5d0dc; --border: var(--fnd-border); --border-strong: var(--fnd-border-strong); --border-focus: var(--fnd-magenta); /* ── Rail / dark chrome ────────────────────────────────── */ --rail-bg: var(--fnd-deep-navy); --rail-bg-hover: #08254f; --rail-bg-active: var(--fnd-navy); --rail-border: rgba(255, 255, 255, 0.08); --rail-text: rgba(245, 249, 255, 0.96); --rail-text-dim: rgba(214, 226, 241, 0.68); /* ── Elevation ─────────────────────────────────────────── */ --shadow-xs: 0 1px 2px rgba(21, 34, 56, 0.05); --shadow-sm: 0 2px 6px rgba(0, 43, 95, 0.07), 0 1px 2px rgba(0, 43, 95, 0.04); --shadow-md: 0 8px 24px rgba(0, 43, 95, 0.10), 0 2px 8px rgba(201, 0, 90, 0.04); --shadow-lg: 0 16px 40px rgba(0, 43, 95, 0.14), 0 4px 14px rgba(201, 0, 90, 0.06); --shadow-focus: 0 0 0 3px rgba(201, 0, 90, 0.22); --shadow-focus-navy: 0 0 0 3px rgba(0, 43, 95, 0.18); /* ── Radius ────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-pill: 999px; /* ── Spacing scale (4px base) ──────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 1.75rem; /* 28 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ── Typography ────────────────────────────────────────── */ --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-md: 0.9375rem; /* 15 — body default mobile */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.875rem; /* 30 */ --text-4xl: 2.25rem; /* 36 */ --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.6; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; /* ── Layout ────────────────────────────────────────────── */ --fnd-content: 1120px; --fnd-content-wide: 1280px; --rail-width: 248px; --header-height: 64px; --dock-height: 64px; --page-pad-x: 1rem; --page-pad-y: 1rem; /* ── Motion ────────────────────────────────────────────── */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --duration-fast: 120ms; --duration: 180ms; /* ── Component aliases (care / app shell) ──────────────── */ --care-bg: var(--bg); --care-bg-strong: var(--surface-muted); --care-surface: var(--surface); --care-surface-alt: var(--surface-alt); --care-surface-muted: var(--surface-muted); --care-ink: var(--ink); --care-ink-soft: var(--ink-soft); --care-ink-faint: var(--ink-faint); --care-brand: var(--fnd-magenta); --care-brand-deep: var(--fnd-navy); --care-brand-soft: var(--fnd-pale); --care-rail: var(--rail-bg); --care-rail-deep: var(--fnd-deep-navy); --care-border: var(--border); --care-border-strong: var(--border-strong); --care-success-bg: var(--fnd-success-bg); --care-success-text: var(--fnd-success); --care-warning-bg: var(--fnd-warning-bg); --care-warning-text: var(--fnd-warning); --care-danger-bg: var(--fnd-danger-bg); --care-danger-text: var(--fnd-danger); --care-shadow-sm: var(--shadow-sm); --care-shadow-md: var(--shadow-md); --care-radius-sm: var(--radius-md); --care-radius-md: var(--radius-lg); --care-radius-lg: var(--radius-xl); --care-mono: var(--font-mono); --care-sans: var(--font-sans); /* Legacy NHS aliases (internal only) */ --nhs-navy: var(--fnd-navy); --nhs-navy-dark: var(--fnd-deep-navy); --nhs-navy-mid: var(--fnd-navy-mid); --nhs-blue: var(--fnd-magenta); --nhs-blue-light: var(--fnd-rose); --nhs-blue-pale: var(--fnd-pale); --nhs-blue-bg: var(--fnd-magenta-bg); --nhs-green: var(--fnd-success); --nhs-green-bg: var(--fnd-success-bg); --nhs-amber: var(--fnd-warning); --nhs-amber-bg: var(--fnd-warning-bg); --nhs-red: var(--fnd-danger); --nhs-red-bg: var(--fnd-danger-bg); } @media (min-width: 992px) { :root { --page-pad-x: 1.5rem; --page-pad-y: 1.25rem; --text-md: 1rem; } }