/* ========================================================================= AVESYS · DESIGN TOKENS · cascade-ready stylesheet -------------------------------------------------------------------------- Drop this file at the top of every AVESYS surface (admin, public, marketing, sub-pages — anywhere) BEFORE the surface's own stylesheet. Every visual value across the platform reads from these CSS variables. Two layers: 1. PLATFORM tokens (--av-*) — locked, system-wide, never themed 2. TENANT tokens (--tenant-*) — overridden per tenant at SSR time from TenantSite.branding.theme Per North Star §3.1 / §3.5, every token here maps to an existing engine primitive. Adding a new value = update this file + redeploy. No render code touches a hex literal. ========================================================================= */ :root{ /* ── Tenant THEME tokens (overridable per tenant) ─────────────────── */ /* Set at SSR time: const style = `:root{ --tenant-primary: ${theme.primary}; --tenant-primary-2: ${theme.primary_2}; --tenant-accent: ${theme.accent}; }`; Defaults below match the AVESYS Association vertical template. */ --tenant-primary: #0a1024; --tenant-primary-2: #1a2b5c; --tenant-accent: #f5a524; --tenant-accent-2: #e88e0c; --tenant-accent-ink: #2d1b00; --tenant-on-dark: #f6f0e2; /* ── Platform SURFACES (locked, system-wide) ──────────────────────── */ --bg: #f7f4ee; --surface: #ffffff; --surface-2: #fbf9f4; --line: #e7e2d8; --line-soft: #efebe2; /* ── Platform INK (locked) ────────────────────────────────────────── */ --ink: #0c1322; --ink-2: #1a2236; --muted: #5b6577; --muted-2: #8a93a4; --label: #6b7384; /* ── Engine ACCENTS (locked — used by engagement + admin) ─────────── */ --indigo: #4f46e5; --indigo-600: #4338ca; --indigo-50: #eef0ff; --indigo-100: #dde0ff; --violet: #7c3aed; --green: #10a368; --green-600: #0d8957; --green-50: #e6f7ee; --amber: #f5a524; --amber-50: #fff6e0; --rose: #e11d48; --rose-50: #fff0f3; --sky: #0ea5e9; --sky-50: #e6f4ff; /* ── AVESYS BRAND sweep (logo / "Powered by" chip ONLY) ──────────── */ --av-cyan: #22d3ee; --av-blue: #2563eb; --av-violet: #7c3aed; --av-magenta: #d946ef; /* ── TYPOGRAPHY (locked) ──────────────────────────────────────────── */ /* Font load: Inter (UI) + Newsreader (display) + JetBrains Mono (labels). Load with Google Fonts in the app shell : Inter — 400/500/600/700/800 Newsreader — opsz 6..72, weights 400/500/600 + italic 400/500 JetBrains Mono — 400/500/600/700 */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-serif: 'Newsreader', 'Source Serif Pro', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Type scale (px) — clamp() in components for fluid scaling */ --t-display: 68px; /* hero headline cap */ --t-h2: 44px; /* section headline cap */ --t-h3: 26px; /* sub-section heading */ --t-h4: 20px; /* card / panel heading */ --t-body: 15.5px; /* body text */ --t-sm: 13.5px; /* small / CTA / meta */ --t-xs: 11.5px; /* mono eyebrow */ /* ── RADII (locked) ───────────────────────────────────────────────── */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; /* ── SHADOWS (locked) ─────────────────────────────────────────────── */ --sh-card: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); --sh-soft: 0 4px 14px rgba(15,23,42,.06); --sh-pop: 0 12px 32px rgba(15,23,42,.10); --sh-cta: 0 8px 24px rgba(245,165,36,.32); --sh-hero: 0 30px 80px rgba(10,16,36,.45); /* ── LAYOUT (locked) ──────────────────────────────────────────────── */ --page-max: 1280px; --gutter: 56px; } @media (max-width: 1100px){ :root{ --gutter: 36px; } } @media (max-width: 760px) { :root{ --gutter: 22px; } } /* ========================================================================= COLOR RECIPE GUIDE — when to use which token ========================================================================= Hero / dark surfaces → --tenant-primary, --tenant-primary-2 Primary CTA → --tenant-accent on --tenant-accent-ink Cards / forms / page bg → --surface, --surface-2, --bg Borders / dividers → --line, --line-soft Body text → --ink, --ink-2 (titles vs paragraphs) Muted / secondary text → --muted, --muted-2 Success / progress → --green, --green-50 Caution / community pulse → --amber, --amber-50 Donation / love → --rose, --rose-50 Info / events → --indigo, --indigo-50, --violet Live / streaming → --sky, --sky-50 AVESYS chip / "Powered by" → --av-cyan → --av-magenta linear-gradient ========================================================================= */