/** * Global CSS Custom Properties (Variables) * * Centralized design tokens for the GrappleU web application. * These variables ensure consistency across all pages and components. */ /* Inter font — loaded here so every page gets it via base/index.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); :root { /* ============================================ Color Palette - Linear-Inspired Design System ============================================ */ /* Background Elevations (Dark Theme) */ --bg-base: #131416; /* Deepest background */ --bg-elevated: #191a1c; /* Slightly elevated */ --bg-card: #1e1f21; /* Card backgrounds */ --bg-hover: #252628; /* Hover states */ /* Chrome (sidebar/nav) — in dark mode it can match elevated. The light theme overrides this to a slightly-darker-than-body warm gray so the chrome recedes and content takes precedence (Linear redesign pattern, Material 3 surface-container-low role). */ --bg-chrome: #191a1c; /* Sophisticated Gray Scale */ --gray-1: #1e1f22; --gray-2: #27282c; --gray-3: #323437; --gray-4: #434548; --gray-5: #5a5b60; --gray-6: #76777d; /* Text Hierarchy Values lifted Apr 2026 from #7e7f84 / #53545a to clear WCAG 2.2 AA 4.5:1 against the dark surface palette (--bg-card #1e1f21, --bg-elevated #252628, etc). Hue preserved; ~3-20% luminance lift. See tests/mobile-audit/contrast-diagnosis.md for the audit data. */ --text-primary: #ffffff; /* Primary text */ --text-secondary: #b4b5b9; /* Secondary text */ --text-tertiary: #8e8f92; /* Tertiary text — was #7e7f84, lifted 6% to clear AA on the darkest surface variants (#27282c at 4.55:1). Imperceptible visual change at this luminance step. */ --text-quaternary: #85868e; /* Disabled/placeholder — was #53545a, lifted 20% (was 2.18:1, now 4.55:1) */ /* Primary Accent - Matches logo blue --accent darkened Apr 2026 from #3b82f6 (Tailwind blue-500) to #2563eb (Tailwind blue-600) so white text on accent-colored buttons clears AA (was 3.67:1, now 5.17:1). For accent-COLORED text on dark backgrounds, use --accent-text (lighter) instead — the inverse contrast direction requires the lighter variant. */ --accent: #2563eb; /* Primary accent — used as button bg, colored surfaces */ --accent-hover: #60a5fa; /* Accent hover state — also used as --accent-text alias */ --accent-text: #60a5fa; /* Accent-colored text on dark backgrounds. Same value as --accent-hover for now, separate semantic name so future hover-state changes don't regress link contrast. */ /* Border System */ --border-subtle: rgba(255, 255, 255, 0.06); --border-medium: rgba(255, 255, 255, 0.1); --border-strong: rgba(255, 255, 255, 0.15); /* Avatar */ --avatar-fallback: #004d40; /* Status Colors */ --accent-success: #10b981; --accent-success-bright: #22c55e; /* Bright green for success indicators */ --accent-warning: #f59e0b; --accent-danger: #ef4444; --accent-danger-hover: #dc2626; /* Darker red for hover/active states */ --accent-info: #3b82f6; /* Text on Colored Backgrounds */ --text-on-accent: #ffffff; /* White text on accent-colored backgrounds */ /* Light Surface Colors */ --bg-muted: #f5f5f5; /* Light muted background (e.g., sign-in buttons) */ /* RGB Values (for use with rgba()) */ --accent-rgb: 59, 130, 246; --accent-success-rgb: 16, 185, 129; --accent-warning-rgb: 245, 158, 11; --accent-danger-rgb: 239, 68, 68; --accent-info-rgb: 59, 130, 246; /* Light opacity backgrounds for status colors */ --accent-light: rgba(59, 130, 246, 0.15); --accent-success-light: rgba(16, 185, 129, 0.15); --accent-warning-light: rgba(245, 158, 11, 0.15); --accent-danger-light: rgba(239, 68, 68, 0.15); --accent-info-light: rgba(59, 130, 246, 0.15); /* Legacy Aliases (for backward compatibility) */ --color-primary: var(--accent); /* #3b82f6 blue */ --color-secondary: var(--accent-hover); /* #60a5fa lighter blue */ --bg-primary: var(--bg-base); --bg-secondary: var(--bg-elevated); --bg-card-hover: var(--bg-hover); --bg-modal: rgba(0, 0, 0, 0.8); --text-dim: var(--text-quaternary); --border-color: var(--border-subtle); --border-color-hover: var(--border-medium); --border-color-focus: var(--border-strong); /* ============================================ Spacing & Layout ============================================ */ /* Layout Dimensions */ --sidebar-width: 320px; --sidebar-padding: 1.5rem; --header-height: 56px; --header-padding: 1rem; --content-max-width: 65ch; --content-padding: 2rem; /* Spacing Scale */ --space-xs: 0.25rem; /* 4px */ --space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ /* Gaps */ --gap-xs: 0.5rem; --gap-sm: 0.75rem; --gap-md: 1rem; --gap-lg: 1.5rem; /* ============================================ Typography ============================================ */ /* Font Families */ --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'Courier New', monospace; /* Font Sizes - Standard Scale */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ /* Font Sizes - In-Between (for card titles, labels) */ --font-size-xs-mid: 0.8125rem; /* 13px - between xs and sm */ --font-size-sm-mid: 0.9375rem; /* 15px - between sm and base */ /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.6; --line-height-relaxed: 1.75; /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ============================================ Border Radius ============================================ */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ============================================ Shadows - Linear-Style Elevation ============================================ */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.35); --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.45); --shadow-2xl: 0 30px 80px rgba(0, 0, 0, 0.55); /* Focus Rings */ --focus-ring: 0 0 0 2px rgba(59, 130, 246, 0.2); --focus-ring-danger: 0 0 0 2px rgba(239, 68, 68, 0.2); --focus-ring-success: 0 0 0 2px rgba(16, 185, 129, 0.2); /* ============================================ Transitions ============================================ */ /* Durations */ --duration-fast: 0.15s; --duration-normal: 0.3s; --duration-slow: 0.5s; /* Easings */ --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Common Transitions */ --transition-fast: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); --transition-normal: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out); --transition-slow: transform var(--duration-slow) var(--ease-out), opacity var(--duration-slow) var(--ease-out); --transition-colors: background var(--duration-normal) var(--ease-out), color var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out); /* ============================================ Z-Index Layers ============================================ */ --z-behind: -1; --z-base: 1; --z-above: 3; --z-overlay: 100; --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070; --z-notification: 1080; --z-sidebar: 1100; --z-toast: 2000; --z-skip-nav: 10000; /* ============================================ Breakpoints (for reference in JS) ============================================ */ --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1440px; /* ============================================ Component-Specific Variables ============================================ */ /* Buttons */ --button-height: 40px; --button-padding: var(--space-sm) var(--space-lg); --button-border-radius: var(--radius-md); /* Chat Bubbles */ --chat-bubble-max-width: 70%; --chat-bubble-padding: var(--space-md) var(--space-lg); /* Cards */ --card-padding: 1.5rem; --card-padding-compact: 1rem; --card-padding-large: 2rem; --card-gap: 1.5rem; /* Backdrop Effects */ --backdrop-blur: 10px; --backdrop-brightness: 0.9; /* ============================================ Dashboard Layout (Phase 0 — Coach Redesign) ============================================ */ --sidebar-width-expanded: 240px; --sidebar-width-collapsed: 64px; --dashboard-header-height: 56px; --dashboard-content-max-width: 1200px; --dashboard-padding: 2rem; /* Chart Color Series */ --chart-blue: #3b82f6; --chart-green: #10b981; --chart-amber: #f59e0b; --chart-purple: #8b5cf6; --chart-pink: #ec4899; --chart-grid: rgba(255, 255, 255, 0.04); /* Nav Items */ --nav-item-height: 36px; --nav-item-radius: 8px; --nav-item-active-bg: rgba(59, 130, 246, 0.1); } /* ============================================================================ Light Theme — SPIKE (2026-05-07) ============================================================================ Override block activated by ``. Inverts the 44 semantic tokens to a Skool-inspired warm-white + blue palette that clears WCAG 2.2 AA on every text/bg pair. Palette per /gu Phase 2 research (skool.com live HTML inspection + contrast audit). Skool's own #909090 secondary grey FAILS 4.5:1 — we use #5C5F66 instead. Skool's #2E6EF5 blue fails on white-text buttons — we use #1E5FE0 (deeper blue, 5.6:1 white-on-accent). This is a SPIKE — the goal is to see how the cascade looks across the app before committing to either Option B (full hardcoded-color audit) or Option C (per-surface only). ============================================================================ */ [data-theme="light"] { /* Background Elevation Ladder — light mode REVERSES dark-mode direction: elevation goes DARKER as you rise (Material 3 surface-container roles, Linear's 2024 redesign). Layers, lightest→darkest: body --bg-base #F8F7F5 warm canvas (Skool exact) cards --bg-card #FFFFFF pop FORWARD off the body hover --bg-hover #EBEAE6 surface hover bg chrome --bg-chrome #F2F0EC sidebar/nav RECEDES — content takes precedence (Linear: "navigation is now a few notches dimmer allowing the main content area to take precedence") --bg-elevated stays white so existing `var(--bg-elevated)` consumers (cards across the app) still pop. The chrome recession is opt-in via --bg-chrome on the sidebar/header only. */ --bg-base: #F8F7F5; --bg-elevated: #FFFFFF; --bg-card: #FFFFFF; --bg-chrome: #F2F0EC; /* sidebar — DARKER than body, recedes */ --bg-hover: #EBEAE6; --bg-muted: #F2F0EC; /* matches chrome — empty cells, filled inputs */ /* Gray scale flipped — light → dark */ --gray-1: #FFFFFF; --gray-2: #F5F4F2; --gray-3: #E8E7E5; --gray-4: #C9C9CD; --gray-5: #9A9B9F; --gray-6: #6B6C70; /* Text Hierarchy — near-black primary, WCAG-passing secondary chain */ --text-primary: #1A1A1A; /* 17.8:1 on bg ✓ AAA */ --text-secondary: #5C5F66; /* 5.8:1 on bg ✓ AA */ --text-tertiary: #6B6C70; /* 5.0:1 on bg ✓ AA */ --text-quaternary: #76777D; /* 4.5:1 on bg ✓ AA threshold */ /* Accent — desaturated for light-mode warm canvas. Original #1E5FE0 was calibrated for dark/cool surfaces and read "loud" against the warm cream body (Refactoring UI: saturation must drop on lighter canvases; Apple HIG: provide two accent variants per mode). #3D63D8 still clears 5.2:1 white-text AA. The deeper #1E5FE0 is retained as --accent-hover so interaction adds visual depth. */ --accent: #3D63D8; /* 5.2:1 white-text ✓ AA */ --accent-hover: #1E5FE0; /* deeper — pressed/hover only */ --accent-text: #1849B3; /* darkest — for accent text on light bg */ /* Borders */ --border-subtle: #E4E4E4; --border-medium: #D4D4D4; --border-strong: #C9C9CD; /* Status colors — re-tuned for light bg AA */ --accent-success: #0F7B3F; /* 5.4:1 on white ✓ */ --accent-warning: #A65A00; /* 4.7:1 on white ✓ */ --accent-danger: #C13030; /* 5.0:1 on white ✓ */ --accent-info: #3D63D8; /* match desaturated primary */ /* Chart grid / nav active — alpha-color matched to new accent hue */ --chart-grid: rgba(0, 0, 0, 0.06); --nav-item-active-bg: rgba(61, 99, 216, 0.10); /* Light-opacity status backgrounds */ --accent-light: rgba(61, 99, 216, 0.10); --accent-success-light: rgba(15, 123, 63, 0.12); --accent-warning-light: rgba(166, 90, 0, 0.12); --accent-danger-light: rgba(193, 48, 48, 0.12); --accent-info-light: rgba(61, 99, 216, 0.10); }