/* ========================================================================== MCC Alumni Tracker — Shared Design Tokens -------------------------------------------------------------------------- One source of truth for the alumni portal and the public site. The palette, radii and shadows mirror admin-modern.css so all three surfaces read as one product; the primary ramp is built around the institution's navy (#0d3b66) that the public template and portal already use, rather than the admin's brighter blue. Load this BEFORE the surface skin (portal-modern.css / public-modern.css). ========================================================================== */ /* The Plus Jakarta Sans lives in the layout , not an @import here: an @import forces the browser to fetch this file before it even discovers the font, adding a round trip in front of first paint. --mcc-font falls back to the system stack if that link is missing. */ :root { --mcc-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Brand navy ramp, anchored on the existing #0d3b66 */ --navy-50: #eef4fa; --navy-100: #d8e6f3; --navy-200: #b3cbe4; --navy-300: #7fa6cd; --navy-400: #4a7cb0; --navy-500: #1f5a92; --navy-600: #14477a; --navy-700: #0d3b66; --navy-800: #0a2e50; --navy-900: #072139; --mcc-primary: var(--navy-700); --mcc-primary-hover: var(--navy-600); --mcc-primary-active: var(--navy-800); --mcc-primary-soft: var(--navy-50); --mcc-on-primary: #ffffff; /* Slate neutrals — shared with the admin panel */ --bg-page: #f6f8fb; --bg-surface: #ffffff; --bg-sunken: #f1f5f9; --border-light: #e2e8f0; --border-subtle:#f1f5f9; --text-main: #0f172a; --text-body: #334155; --text-muted: #64748b; --text-light: #94a3b8; /* Accents */ --accent-emerald: #10b981; --accent-emerald-soft: #ecfdf5; --accent-amber: #f59e0b; --accent-amber-soft: #fffbeb; --accent-rose: #f43f5e; --accent-rose-soft: #fff1f2; --accent-indigo: #6366f1; --accent-indigo-soft: #eef2ff; --accent-cyan: #06b6d4; --accent-cyan-soft: #ecfeff; /* Radii */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-2xl: 24px; --radius-full: 9999px; /* Elevation */ --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, .05); --shadow-sm: 0 2px 4px -1px rgba(15, 23, 42, .06), 0 1px 2px -1px rgba(15, 23, 42, .04); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, .08), 0 2px 6px -2px rgba(15, 23, 42, .04); --shadow-lg: 0 10px 25px -3px rgba(15, 23, 42, .08), 0 4px 10px -4px rgba(15, 23, 42, .04); --shadow-xl: 0 20px 40px -8px rgba(15, 23, 42, .12), 0 8px 16px -8px rgba(15, 23, 42, .06); --shadow-brand: 0 6px 18px -4px rgba(13, 59, 102, .35); /* Motion — one ramp so everything eases alike */ --ease: cubic-bezier(.4, 0, .2, 1); --t-fast: .15s var(--ease); --t-mid: .22s var(--ease); --t-slow: .35s var(--ease); /* Focus ring, used by both skins */ --ring: 0 0 0 3px rgba(13, 59, 102, .18); } /* Anyone who asked the OS for less motion gets none of the flourishes. */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: .01ms; --t-mid: .01ms; --t-slow: .01ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }