/* ============================================================ XAVER 2026 Design System — foundations for the admin panel. Tokens ported from the welly app (app/assets/stylesheets/xaver.css), which copied them verbatim from the XAVER design handoff. DIVERGENCE FROM WELLY: everything except @font-face is scoped to `.xaver-admin` (set on the admin layout ) instead of :root. The public site's Tailwind theme owns --font-display/--font-body (Barlow) and the --radius-*/--shadow-* scales; defining these globally would restyle the whole public site. ============================================================ */ /* ---------- Fonts (registration is global; only admin pages use them) ---------- */ @font-face { font-family: "Funnel Display"; src: url("/assets/FunnelDisplay-VariableFont_wght-fdf637ff.ttf") format("truetype"); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/Figtree-VariableFont_wght-89352678.ttf") format("truetype"); font-weight: 300 900; font-style: normal; font-display: swap; } @font-face { font-family: "Figtree"; src: url("/assets/Figtree-Italic-VariableFont_wght-cdc1fc1e.ttf") format("truetype"); font-weight: 300 900; font-style: italic; font-display: swap; } .xaver-admin { /* ---------- Brand colours ---------- */ --xaver-navy: #091435; --xaver-light-blue: #8EB8DF; --xaver-charcoal: #323132; --xaver-white: #FFFFFF; /* Highlight colours — use sparingly, NEVER together */ --xaver-orange: #F09124; --xaver-pink: #F087B2; /* ---------- Tints & supporting steps ---------- */ --xaver-navy-900: #060D24; --xaver-navy-800: #091435; --xaver-navy-700: #15204A; --xaver-navy-600: #25315F; --xaver-blue-300: #B7D2EC; --xaver-blue-200: #D7E6F4; --xaver-blue-100: #EDF4FB; /* ---------- Neutrals ---------- */ --xaver-grey-50: #F6F7F9; --xaver-grey-100: #ECEEF1; --xaver-grey-200: #DCDFE5; --xaver-grey-300: #C2C7D0; --xaver-grey-400: #9AA1AD; --xaver-grey-500: #6B7280; --xaver-grey-600: #4A4E55; --xaver-grey-700: #323132; /* ---------- Semantic — foreground ---------- */ --fg-1: var(--xaver-navy); --fg-2: var(--xaver-grey-600); --fg-3: var(--xaver-grey-500); --fg-on-dark-1: var(--xaver-white); --fg-on-dark-2: var(--xaver-blue-300); --fg-on-dark-3: #8C97B5; /* ---------- Semantic — background ---------- */ --bg-1: var(--xaver-white); --bg-2: var(--xaver-blue-100); --bg-3: var(--xaver-grey-50); --bg-dark-1: var(--xaver-navy); --bg-dark-2: var(--xaver-navy-900); --bg-dark-raised: var(--xaver-navy-700); /* ---------- Semantic — lines & accents ---------- */ --border-light: var(--xaver-grey-200); --border-dark: var(--xaver-navy-600); --accent: var(--xaver-light-blue); --accent-strong: var(--xaver-navy); --highlight-warm: var(--xaver-orange); --highlight-soft: var(--xaver-pink); /* ---------- Type families (override Barlow inside the admin) ---------- */ --font-display: "Funnel Display", "Arial Black", sans-serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; /* ---------- Tracking ---------- */ --tracking-display: -0.01em; --tracking-tight: -0.015em; --tracking-wordmark: 0.18em; --tracking-overline: 0.16em; /* ---------- Radii (also retunes Tailwind rounded-* inside the admin) ---------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* ---------- Elevation (navy-tinted, never grey-black) ---------- */ --shadow-sm: 0 1px 2px rgba(9, 20, 53, 0.06), 0 1px 3px rgba(9, 20, 53, 0.08); --shadow-md: 0 4px 10px rgba(9, 20, 53, 0.08), 0 2px 4px rgba(9, 20, 53, 0.06); --shadow-lg: 0 18px 40px rgba(9, 20, 53, 0.12), 0 6px 14px rgba(9, 20, 53, 0.08); --shadow-focus: 0 0 0 3px rgba(142, 184, 223, 0.55); /* ---------- Motion ---------- */ --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur: 220ms; --dur-slow: 420ms; } /* Isometric pattern overlay for navy panels (~6-9% opacity per the handoff). The parent needs position:relative and overflow:hidden. */ .xaver-admin .pattern-overlay { position: absolute; inset: 0; background: url("/assets/pattern-42e0a4dc.svg") 0 0 / 900px auto repeat; opacity: 0.09; pointer-events: none; }