/* ============================================================ ACCELERATION ACADEMIES BRAND TOKENS — New UI Imported 2026-08-05 from the "Acceleration Academies Design System" project (claude.ai/design), files colors_and_type.css + styles.css. Source of truth for brand values; see also README.md / SKILL.md in that project for the copy + usage rules. TWO LAYERS, deliberately: 1. :root — the raw --aa-* brand tokens. Defining custom properties has NO rendering effect until something consumes them, and nothing in the legacy UI references --aa-*, so this block is inert outside the New UI. That is why it can sit at :root safely. 2. .is-myincite-ui — remaps the existing --nui-* tokens onto the brand values. Every New UI rule already consumes --nui-*, so this re-skins the whole toggle without editing a single rule, and it is scoped to the toggle class, so legacy Incite is untouched whether the toggle is on or off. DELIBERATELY OMITTED from the upstream file: - @font-face blocks. Both apps already load Montserrat from Google Fonts (index.html), so the TTFs are unnecessary. NOTE: that link requests weights 300-700 only; the brand's 800/900 (ExtraBold/Black) would synthesize. Add those weights to the Google Fonts href before using --text-3xl/.aa-h1. - The bare `a { }` / `a:hover { }` rules. Unscoped element selectors would restyle every link in the legacy app — the exact scope leak this codebase has been bitten by before. Link colors are handled per-scope by the New UI sheets. - Aller (--font-logo). LOGO ARTWORK ONLY per the brand rules, never typeset — the wordmark ships as SVG in the sidebar. ============================================================ */ :root { /* ---------- BRAND ---------- */ --aa-blue: #0074C5; /* PRIMARY */ --aa-blue-pantone: #2769B3; /* Pantone 2175 C */ --aa-teal: #00AEC4; /* SECONDARY - the everyday accent */ --aa-teal-pantone: #00BBD2; /* Pantone 3115 C */ /* Accents - use SPARINGLY per brand rules */ --aa-magenta: #842571; --aa-purple: #57327C; --aa-gold: #E3A50E; --aa-slate: #7B8E92; /* ---------- NEUTRALS ---------- */ --aa-black: #1A1A1A; --aa-ink: #222831; --aa-grey-700: #4A5358; --aa-grey-500: #7B8E92; --aa-grey-300: #C5CDD0; --aa-grey-100: #EEF1F2; --aa-off-white: #F7F9FA; --aa-white: #FFFFFF; /* ---------- SEMANTIC ---------- */ --fg-1: var(--aa-ink); --fg-2: var(--aa-grey-700); --fg-3: var(--aa-grey-500); --fg-on-dark: var(--aa-white); --bg-1: var(--aa-white); --bg-2: var(--aa-off-white); --bg-3: var(--aa-grey-100); --bg-dark: var(--aa-black); --border-1: var(--aa-grey-300); --border-2: var(--aa-grey-100); --link: var(--aa-blue); --link-hover: #005a99; --focus-ring: var(--aa-teal); --accent-primary: var(--aa-blue); --accent-secondary: var(--aa-teal); --status-success: #1B9E6F; --status-warning: var(--aa-gold); --status-error: #C0392B; --status-info: var(--aa-teal); /* ---------- SIGNATURE GRADIENT ---------- */ /* magenta -> purple -> blue -> teal. Hero/title moments only. */ --aa-gradient: linear-gradient(120deg, var(--aa-magenta) 0%, var(--aa-purple) 32%, var(--aa-blue) 68%, var(--aa-teal) 100%); --aa-gradient-diag: linear-gradient(135deg, #842571 0%, #57327C 30%, #0074C5 70%, #00AEC4 100%); /* ---------- TYPE ---------- */ --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif; --font-body: "Montserrat", "Avenir", "Helvetica Neue", Arial, sans-serif; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.375rem; --text-xl: 1.75rem; --text-2xl: 2.25rem; --text-3xl: 3rem; --text-4xl: 4rem; --leading-tight: 1.1; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ---------- RADII ---------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* ---------- ELEVATION ---------- */ --shadow-sm: 0 1px 2px rgba(26,26,26,0.06), 0 1px 3px rgba(26,26,26,0.08); --shadow-md: 0 2px 6px rgba(26,26,26,0.08), 0 6px 16px rgba(26,26,26,0.08); --shadow-lg: 0 8px 24px rgba(26,26,26,0.10), 0 16px 40px rgba(26,26,26,0.10); --shadow-blue: 0 8px 24px rgba(0,116,197,0.22); /* ---------- SPACING (4px base) ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ---------- MOTION ---------- */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; } /* ============================================================ BRIDGE — remap the New UI's own tokens onto the brand. Scoped to .is-myincite-ui so this only takes effect while the New UI toggle is on. Ordering: this file must load AFTER new-ui.css, whose :root block sets the original --nui-* values; the class selector then wins on specificity regardless. ============================================================ */ .is-myincite-ui { /* Montserrat is the brand's universal font. new-ui.css shipped Karla here, and the "Montserrat" fallbacks written elsewhere as var(--nui-font, "Montserrat", ...) never fired, because the token WAS set - a fallback only applies when the property is missing entirely. Student Portal already made this switch. */ --nui-font: "Montserrat", "Helvetica Neue", Arial, sans-serif; --nui-brand: var(--aa-blue); /* was #0077B6 - a darker cyan that is not the brand secondary */ --nui-brand-teal: var(--aa-teal); /* was #1d4ed8 (Tailwind blue-700); Pantone 2175 C is the brand's own darker blue */ --nui-accent-dark: var(--aa-blue-pantone); /* Neutrals: the New UI shipped Tailwind's slate ramp. Mapped onto the brand's grey ramp, which is warmer and slightly desaturated. */ --nui-text-dark: var(--aa-ink); --nui-text-body: var(--aa-grey-700); --nui-text-secondary: var(--aa-grey-700); --nui-text-muted: var(--aa-grey-500); --nui-text-muted-dark: var(--aa-ink); --nui-bg-white: var(--aa-white); --nui-white: var(--aa-white); --nui-bg-lightest: var(--aa-off-white); --nui-bg-light: var(--aa-grey-100); --nui-bg-hover: var(--aa-grey-100); --nui-bg-dark: var(--aa-black); --nui-border: var(--aa-grey-300); --nui-border-hover: var(--aa-grey-500); --nui-border-light: var(--aa-grey-100); --nui-border-subtle: var(--aa-grey-100); --nui-destructive: var(--status-error); /* was a cyan->blue ramp unrelated to the brand */ --nui-gradient-avatar: var(--aa-gradient-diag); }