/* ============================================================ AIAI Portal — Design Tokens Derived from AIAI Brand Guidelines (2016) + member dashboard direction. RULE: no raw hex values anywhere else in the codebase. Every color, size, and space in every module comes from this file. Split into two :root blocks (colour, then everything else) so that each half is independently valid. Do not merge them. ============================================================ */ /* ============ PART 1 of 2 — COLOUR ============ */ :root { /* --- BRAND (fixed — from the brand guide, do not alter) --------- */ --aiai-blue: #0c5aa9; --aiai-gray: #58595b; --aiai-yellow: #ffd400; /* --- UNCONFIRMED ------------------------------------------------ Teal is used heavily throughout the 2026 concept screens but does NOT appear in the 2016 brand guide. Pending client confirmation. If rejected, change these two values and the concept look holds. */ --aiai-teal: #4dbcc7; --aiai-teal-deep: #3eb7c2; --aiai-teal-tint: #e8f6f8; /* --- BLUE RAMP (anchored on brand blue at 500) ------------------ */ --blue-50: #f1f6fb; --blue-100: #e0ecf8; --blue-200: #c0daf4; --blue-300: #8bbef1; --blue-400: #4198f1; --blue-500: #0c5aa9; --blue-600: #0b5096; --blue-700: #094179; --blue-800: #07315d; --blue-900: #052240; /* --- CHROME (sidebar and topbar) -------------------------------- NAME IS NOW WRONG. These carry brand blue, not navy — changed 25 Aug 2026 on client direction. Renaming to --chrome-* is a separate sweep across shell.css and the page files; until then the names are historical and the values are correct. Raised and active are LIGHTER than the base. On navy a lift meant going lighter toward blue; on a mid-blue base the same logic applies, but the steps have to be bigger to register. */ --navy: #0c5aa9; --navy-raised: #1668bb; --navy-active: #2176cc; /* --- NEUTRALS --------------------------------------------------- */ --ink-900: #16181d; --ink-700: #3f4147; --ink-500: #6b6e76; --ink-400: #9195a0; --ink-300: #c9cdd6; --ink-200: #e3e6ec; --ink-100: #eef0f4; --ink-50: #f7f8fa; --white: #ffffff; /* --- SEMANTIC --------------------------------------------------- */ --success: #15803d; --success-tint: #ecfdf3; --success-ink: #166534; --warning: #b45309; --warning-tint: #fffbeb; --danger: #b91c1c; --danger-tint: #fef2f2; --info: var(--blue-500); --info-tint: var(--blue-50); /* --- ROLES ------------------------------------------------------ */ --bg-app: var(--ink-50); --bg-surface: var(--white); --bg-sunken: var(--ink-100); --bg-nav: var(--navy); --bg-topbar: var(--navy); --bg-selected: var(--blue-50); --text-primary: var(--ink-700); --text-heading: var(--ink-900); --text-muted: var(--ink-500); --text-on-dark: var(--white); /* blue-300 cleared 8:1 on navy but only 3.5:1 on brand blue, which fails AA for body text. blue-100 restores it to about 5.7:1. */ --text-on-dark-muted: var(--blue-100); --text-link: var(--blue-600); --text-link-hover: var(--blue-700); --border-default: var(--ink-200); --border-strong: var(--ink-300); --border-focus: var(--blue-400); --action-primary: var(--blue-500); --action-primary-hover: var(--blue-600); --action-primary-text: var(--white); /* --- CARD ACCENTS ----------------------------------------------- */ --accent-teal: var(--aiai-teal-deep); --accent-yellow: var(--aiai-yellow); --accent-blue: var(--blue-500); } /* ---- END OF PART 1 — Part 2 follows in a second commit ---- */ /* ============ PART 2 of 2 — TYPE, SPACE, LAYOUT ============ */ :root { /* --- TYPE ------------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --text-xs: 0.75rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.015em; --tracking-wide: 0.06em; /* --- SPACE (4px base) ------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --- RADIUS ----------------------------------------------------- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px; /* --- ELEVATION -------------------------------------------------- Shadow tints stay navy-derived on purpose. These fall on light surfaces, not on the chrome, and a blue-tinted shadow reads as a colour cast rather than a shadow. */ --shadow-none: none; --shadow-sm: 0 1px 2px rgba(7, 34, 64, 0.06); --shadow-card: 0 1px 2px rgba(7, 34, 64, 0.05), 0 2px 8px rgba(7, 34, 64, 0.05); --shadow-md: 0 4px 12px rgba(7, 34, 64, 0.10); --shadow-lg: 0 12px 32px rgba(7, 34, 64, 0.16); --focus-ring: 0 0 0 3px rgba(65, 152, 241, 0.45); /* --- LAYOUT ----------------------------------------------------- */ --sidebar-width: 244px; --sidebar-width-collapsed: 64px; --topbar-height: 58px; --content-max: 1440px; --content-pad: var(--space-6); /* --- MOTION ----------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --duration-fast: 120ms; --duration-base: 200ms; } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; } } /* ---- END OF FILE ---- */