/* ACS design tokens — single source of truth shared by: • frontend/ (Tailwind v4 @theme maps onto these variables) • templates/acs-website/* (marketing pages link this file directly) Light is the default. Dark is opt-in via [data-theme="dark"] on (or prefers-color-scheme when data-theme is absent). Brand-agnostic on purpose: a rename is a swap of --brand-* + logo. */ :root { /* ---- Brand ---------------------------------------------------------- */ --brand-50: #eef7ff; --brand-100: #d9edff; --brand-200: #bce0ff; --brand-300: #8ecdff; --brand-400: #59b0ff; --brand-500: #2f8fff; /* primary action */ --brand-600: #1a70f2; /* hover */ --brand-700: #155adc; --brand-800: #1749b1; --brand-900: #19408b; --brand-950: #142955; --accent-500: #ff6a3d; /* warm accent for highlights / CTAs on dark */ --accent-600: #ea5327; /* ---- Neutrals (ink) ------------------------------------------------- */ --ink-0: #ffffff; --ink-50: #f8fafc; --ink-100: #f1f5f9; --ink-200: #e2e8f0; --ink-300: #cbd5e1; --ink-400: #94a3b8; --ink-500: #64748b; --ink-600: #475569; --ink-700: #334155; --ink-800: #1e293b; --ink-900: #0f172a; --ink-950: #080c16; /* ---- Semantic status ------------------------------------------------ */ --success-500: #16a34a; --success-100: #dcfce7; --warning-500: #d97706; --warning-100: #fef3c7; --danger-500: #dc2626; --danger-100: #fee2e2; --info-500: #0891b2; --info-100: #cffafe; /* ---- Content-type hues (calendar / library chips) ------------------- */ --type-article: #2f8fff; --type-social: #8b5cf6; --type-video: #ec4899; --type-podcast: #f59e0b; --type-image: #10b981; --type-ad: #f97316; --type-email: #06b6d4; --type-review: #64748b; /* ---- Surfaces (light) ---------------------------------------------- */ --bg: var(--ink-50); --bg-elevated: var(--ink-0); --bg-subtle: var(--ink-100); --bg-inset: var(--ink-100); --fg: var(--ink-900); --fg-muted: var(--ink-600); --fg-subtle: var(--ink-500); --fg-on-brand: #ffffff; --border: var(--ink-200); --border-strong: var(--ink-300); --ring: var(--brand-500); --sidebar-bg: var(--ink-0); --sidebar-fg: var(--ink-700); --sidebar-active-bg: var(--brand-50); --sidebar-active-fg: var(--brand-700); /* ---- Type ----------------------------------------------------------- */ --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-display: "Instrument Serif", "Fraunces", Georgia, "Times New Roman", serif; /* editorial headlines (marketing) */ --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --text-5xl: 3rem; --text-6xl: 3.75rem; --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.55; /* ---- Shape / depth -------------------------------------------------- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 9999px; --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06); --shadow: 0 1px 3px rgb(15 23 42 / 0.08), 0 4px 12px rgb(15 23 42 / 0.06); --shadow-lg: 0 8px 24px rgb(15 23 42 / 0.10), 0 2px 6px rgb(15 23 42 / 0.06); --shadow-glow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 20%, transparent); /* ---- Layout --------------------------------------------------------- */ --sidebar-w: 248px; --sidebar-w-collapsed: 68px; --topbar-h: 56px; --container: 1200px; --ease: cubic-bezier(.2,.8,.2,1); --dur: 160ms; color-scheme: light; } /* ---- Dark theme ------------------------------------------------------- */ [data-theme="dark"] { --bg: var(--ink-950); --bg-elevated: #0f1523; --bg-subtle: #131a2a; --bg-inset: #0b1020; --fg: var(--ink-100); --fg-muted: var(--ink-400); --fg-subtle: var(--ink-500); --border: #1f2937; --border-strong: #334155; --sidebar-bg: #0b1020; --sidebar-fg: var(--ink-300); --sidebar-active-bg: color-mix(in srgb, var(--brand-500) 18%, transparent); --sidebar-active-fg: var(--brand-300); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow: 0 1px 3px rgb(0 0 0 / 0.5), 0 4px 12px rgb(0 0 0 / 0.4); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.55); color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: var(--ink-950); --bg-elevated: #0f1523; --bg-subtle: #131a2a; --bg-inset: #0b1020; --fg: var(--ink-100); --fg-muted: var(--ink-400); --fg-subtle: var(--ink-500); --border: #1f2937; --border-strong: #334155; --sidebar-bg: #0b1020; --sidebar-fg: var(--ink-300); --sidebar-active-bg: color-mix(in srgb, var(--brand-500) 18%, transparent); --sidebar-active-fg: var(--brand-300); color-scheme: dark; } }