/* ============================================================ EveryChat — Design Tokens Primary source: software-redesign-guide.html ============================================================ These are the foundational CSS custom properties for the EveryChat frontend. All component CSS should reference these tokens rather than hard-coded values. Most tokens are extracted directly from software-redesign-guide.html. A few additions come from layout/component work where the source designs require values the guide doesn't formally document. These are clearly commented at their definition. Section index: 1. Colors 1a. Brand & action (blue scale) 1b. Status palette (yellow, green, purple, pink, red, peach) 1c. Surfaces & backgrounds 1d. Text colors 1e. Borders 1f. Semantic aliases 1g. Overlays & focus rings 1h. Gradients 1i. On-blue surfaces 1j. Rail palette 2. Typography 3. Spacing 4. Border radii 5. Shadows 6. Z-index scale 7. Transitions / motion 8. Layout ============================================================ */ :root { /* ============================================================ 1. COLORS ============================================================ */ /* ----- 1a. Brand & action (blue scale) ----- */ --color-blue: #2563EB; /* Primary action */ --color-blue-dark: #1D4ED8; /* Hover state */ --color-blue-light: #3B82F6; /* Accents, gradients */ --color-blue-pale: #DBEAFE; /* Selection, borders */ --color-blue-glow: #EFF6FF; /* Active bg, info tint */ /* ----- 1b. Status palette ----- */ /* Yellow — warnings, reviews, delayed */ --color-yellow: #F59E0B; --color-yellow-pale: #FEF3C7; --color-yellow-glow: #FFFBEB; /* Green — success, SMS, completed */ --color-green: #10B981; --color-green-dark: #059669; /* Hover state for success buttons */ --color-green-pale: #D1FAE5; --color-green-glow: #ECFDF5; /* Red — errors, destructive, alerts */ --color-red: #EF4444; --color-red-dark: #DC2626; /* Hover state for danger buttons */ --color-red-pale: #FEE2E2; --color-red-glow: #FEF2F2; /* Purple — Forms channel, tags, TeamChat surfaces */ --color-purple: #7C3AED; --color-purple-dark: #6D28D9; /* Hover text color, label text */ --color-purple-darker: #5B21B6; /* Email TeamChat button hover text */ --color-purple-light: #A78BFA; /* Flash-glow border, focus rings */ --color-purple-pale: #EDE9FE; --color-purple-glow: #F5F3FF; /* Hover background tint */ --color-purple-border: #E9E2FB; /* TeamChat thread surface border */ --color-purple-border-strong: #D4CCEC; /* TeamChat composer input border */ /* Pink — Instagram channel, tags */ --color-pink: #EC4899; --color-pink-pale: #FCE7F3; /* Peach — task / linked-task surfaces. Parallel to yellow (which means "warning/review"); peach unambiguously means "task-related." Used by message task indicators, email task badges, and linked-task strips. */ --color-task: #C2410C; /* Task badge icon, linked-task left border */ --color-task-pale: #FED7AA; /* Linked-task border */ --color-task-glow: #FFEDD5; /* Task badge background, linked-task icon bg */ --color-task-surface: #FFF7ED; /* Linked-task surface (lightest) */ --color-task-text: #9A3412; /* Body text on task surface */ /* ----- 1c. Surfaces & backgrounds ----- */ --color-bg: #FFFFFF; /* Surface — cards, panels, modals */ --color-bg-off: #F8FAFC; /* Surface Off — page bg, input bg */ --color-bg-hover: #F1F5F9; /* Surface Hover — row hover, subtle fills */ --color-bg-page: #F5F7FA; /* App-level page background behind cards */ --color-bg-tan: #f5f3ee; /* ----- 1d. Text colors ----- */ --color-text: #1A1D23; /* Primary — headings, labels */ --color-text-secondary: #4B5563; /* Body, descriptions */ --color-text-dim: #9CA3AF; /* Captions, placeholders */ /* ----- 1e. Borders ----- */ --color-border: #E5E7EB; /* Default borders, dividers */ --color-border-hover: #CBD5E1; /* Hover state on inputs, selectable rows, cards */ --color-border-light: #F1F5F9; /* Row dividers, light separators */ --color-purple-divider: rgba(124, 58, 237, 0.12); /* TeamChat composer divider above input row */ /* ----- 1f. Semantic aliases ----- The guide treats blue as the only action color, status colors as semantic meaning carriers, and the neutral scale as interface chrome. These aliases let component CSS reference intent rather than the raw hue. */ --color-action: var(--color-blue); --color-action-hover: var(--color-blue-dark); --color-action-bg-subtle: var(--color-blue-glow); --color-action-border-subtle: var(--color-blue-pale); --color-success: var(--color-green); --color-success-hover: var(--color-green-dark); --color-warning: var(--color-yellow); --color-danger: var(--color-red); --color-danger-hover: var(--color-red-dark); --color-text-primary: var(--color-text); --color-text-on-action: #FFFFFF; /* White text on blue/red/green buttons */ /* Translucent-white surfaces stacked on top of an action color — used for badge fills, count chips, dividers, and borders inside filled buttons or active-state colored surfaces. */ --color-on-action-subtle: rgba(255, 255, 255, 0.20); /* badge fills, count chips */ --color-on-action-muted: rgba(255, 255, 255, 0.12); /* dividers, borders */ --color-border-default: var(--color-border); /* ----- 1g. Overlays & focus rings ----- Modal backdrop is the slate-tinted overlay called out in the Shadows section ("55% dark backdrop blur"). Focus ring uses the blue-on-blue-12% pattern documented in the input states. */ --color-overlay-modal: rgba(15, 23, 42, 0.55); --color-focus-ring: rgba(37, 99, 235, 0.12); --color-focus-ring-danger: rgba(239, 68, 68, 0.12); --color-focus-ring-purple: rgba(167, 139, 250, 0.22); /* TeamChat composer input */ /* Dark overlay buttons sitting on top of a tinted thumbnail — used by attachment remove buttons and similar "X on image" patterns. */ --color-overlay-thumb: rgba(0, 0, 0, 0.55); --color-overlay-thumb-hover: rgba(0, 0, 0, 0.85); /* ----- 1h. Gradients ----- Decorative tints used to give channel-direction cues on avatars and similar surfaces. Treat as atomic values — apply the gradient or don't; don't decompose it into separate stops in component CSS. */ --gradient-message-incoming: linear-gradient(135deg, #3B82F6, #2563EB); --gradient-message-outgoing: linear-gradient(135deg, #10B981, #059669); --gradient-teamchat-surface: linear-gradient(180deg, #FAF7FF 0%, #F6F1FE 100%); /* ----- 1i. On-blue surfaces ----- Tokens for elements rendered on top of a solid blue surface (e.g. .action-bar pill background). White text and buttons need their own opacity scale for hover / active / focus states against the blue. Parallel in spirit to the --color-on-action-* tokens above, but specifically for the blue action-bar context. */ --color-on-blue-text: rgba(255, 255, 255, 0.92); --color-on-blue-bg-hover: rgba(255, 255, 255, 0.14); --color-on-blue-bg-active: rgba(255, 255, 255, 0.22); --color-on-blue-border: rgba(255, 255, 255, 0.22); --color-on-blue-focus-ring: rgba(255, 255, 255, 0.5); /* ----- 1j. Rail palette ----- The dark left navigation rail uses its own palette since standard text/border/bg tokens assume a light surface. Includes input-field tokens for the "search rail" pattern and per-row hover/border treatments. */ --color-rail-bg: #1E293B; /* Rail surface */ --color-rail-bg-hover: #334155; /* Rail item hover */ --color-rail-fg: #CBD5E1; /* Rail text */ --color-rail-fg-dim: #94A3B8; /* Rail text dim */ --color-rail-border: rgba(255, 255, 255, 0.08); --color-rail-border-hover: rgba(255, 255, 255, 0.14); --color-rail-input-bg: rgba(255, 255, 255, 0.08); --color-rail-input-bg-disabled: rgba(255, 255, 255, 0.04); --color-rail-track: rgba(255, 255, 255, 0.06); /* ============================================================ 2. TYPOGRAPHY ============================================================ */ /* ----- Font families ----- Two-font system: Bricolage Grotesque for display, DM Sans for everything else, plus a monospace stack for code. */ --font-display: 'Bricolage Grotesque', sans-serif; --font-body: 'DM Sans', sans-serif; --font-mono: 'Menlo', 'Monaco', monospace; /* ----- Font sizes (the Type Scale) ----- Don't invent sizes between these — the guide is explicit. */ --font-size-h1: 35px; --font-size-h2: 30px; --font-size-h3: 22px; --font-size-h4: 18px; --font-size-h5: 15px; --font-size-body-lg: 16px; --font-size-body: 14px; --font-size-small: 13px; --font-size-caption: 12px; --font-size-micro: 11px; /* ----- Purpose-specific font sizes ----- These sit outside the canonical type scale and exist only for specific UI surfaces where the source designs require an exact size that doesn't match any scale step. Don't reuse these for general body copy. */ --font-size-rail-label: 9px; /* inbox rail micro caption + count, constrained inside 44px button */ --font-size-sidebar-title: 20px; /* profile sidebar title — between h4 (18px) and h3 (22px) */ /* ----- Font weights ----- Bricolage uses 600/700. DM Sans uses 400/500/600/700. 800 is used once on the sidebar logo mark — kept for parity. */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-black: 800; /* ----- Line heights ----- Pulled from the type scale + base body rules. */ --line-height-h1: 1.1; /* 44/48 */ --line-height-h2: 1.15; /* 30/35 */ --line-height-h3: 1.2; /* 22/26 */ --line-height-h4: 1.25; /* 18/22 */ --line-height-h5: 1.3; /* 15/20 */ --line-height-body-lg: 1.6; /* 16/26 */ --line-height-body: 1.5; /* 14/21 — base body line-height */ --line-height-small: 1.5; /* 13/20 */ --line-height-tight: 1; /* button line-height, display samples */ /* ----- Letter spacing ----- Negative tracking on display headings; positive on micro/eyebrow and uppercase labels. */ --letter-spacing-h1: -0.015em; --letter-spacing-h2: -0.01em; --letter-spacing-h3: -0.01em; --letter-spacing-display: -0.01em; /* default for h-elements per base rule */ --letter-spacing-micro: 0.06em; /* micro/eyebrow */ --letter-spacing-uppercase: 0.1em; /* general tracked uppercase labels */ --letter-spacing-uppercase-wide: 0.12em; /* sidebar section titles, section labels */ /* ============================================================ 3. SPACING ============================================================ Note: the guide does NOT formally document a spacing scale. The values below are inferred from observed usage across the guide's CSS (4 / 8 / 12 / 16 / 20 / 24 / 32 / 48 / 64). They follow a roughly 4px-based rhythm. Treat as a judgment call until the guide adds a canonical scale. */ --space-0: 0; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px; --space-8: 16px; --space-9: 20px; --space-10: 24px; --space-12: 32px; --space-14: 40px; --space-16: 48px; --space-20: 64px; --space-24: 80px; --space-32: 120px; /* ============================================================ 4. BORDER RADII ============================================================ */ --radius-xs: 4px; /* small chips, micro buttons, tight slots */ --radius-sm: 8px; /* inputs, small cards, ghost-button hover surfaces */ --radius: 12px; /* default — cards, panels, swatches */ --radius-lg: 16px; /* prominent cards, hero panels */ --radius-pill: 100px; /* eyebrows, pill badges */ /* ============================================================ 5. SHADOWS ============================================================ Five elevation levels. Cool slate tint (rgba(15,23,42,*)) rather than pure black to match the palette. Note on naming: the guide's visual labels are SM/MD/LG/XL/XXL, but the underlying variable names are sm / [base] / md / lg / xl. Names are preserved here for backwards compatibility with the existing system. See summary for the mapping. */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); /* SM — inline cards, input hover, message bubbles */ --shadow: 0 4px 12px rgba(15, 23, 42, 0.06); /* MD — raised cards, hovering buttons, contextual pop-overs */ --shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); /* LG — dropdowns, tooltips, FABs, toasts */ --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10); /* XL — side drawers, inline panels overlapping content */ --shadow-xl: 0 24px 64px rgba(15, 23, 42, 0.18); /* XXL — modals & dialogs only (paired with overlay) */ /* ----- Button-specific colored shadows ----- Filled buttons (primary action, danger, success) get a tinted drop shadow that matches their background color. Three states each: rest, hover (deeper lift), active (compressed). Reserved for filled buttons — don't reuse on cards or panels. */ --shadow-button-action-rest: 0 2px 6px rgba(37, 99, 235, 0.25); --shadow-button-action-hover: 0 4px 12px rgba(37, 99, 235, 0.32); --shadow-button-action-active: 0 2px 4px rgba(37, 99, 235, 0.25); --shadow-button-danger-rest: 0 2px 6px rgba(239, 68, 68, 0.25); --shadow-button-danger-hover: 0 4px 12px rgba(239, 68, 68, 0.32); --shadow-button-danger-active: 0 2px 4px rgba(239, 68, 68, 0.25); --shadow-button-success-rest: 0 2px 6px rgba(16, 185, 129, 0.25); --shadow-button-success-hover: 0 4px 12px rgba(16, 185, 129, 0.32); --shadow-button-success-active: 0 2px 4px rgba(16, 185, 129, 0.25); /* ----- Component-specific shadows ----- Tinted glows, rings, and badge shadows tied to specific component states. Apply atomically — these are not generic elevation steps and shouldn't be substituted for one another. */ /* Task badge — used on .message__task-indicator and the small avatar-pinned task badge. The full stack pairs a soft drop shadow with a 1px hairline ring. */ --shadow-task-badge: 0 2px 4px rgba(154, 52, 18, 0.18), 0 0 0 1px rgba(194, 65, 12, 0.08); --shadow-task-badge-sm: 0 1px 3px rgba(154, 52, 18, 0.25); /* Soft blue ring around the most-recent email in a thread (.email-message--latest). */ --shadow-blue-soft-ring: 0 0 0 3px rgba(37, 99, 235, 0.06); /* Flash-glow on a TeamChat thread that just arrived (.teamchat-thread.is-flash). */ --shadow-purple-flash: 0 0 0 3px rgba(167, 139, 250, 0.25); /* ============================================================ 6. Z-INDEX SCALE ============================================================ Note: the guide does NOT document a formal z-index scale. Only two raw values appear in the guide CSS (5 and 10), used for the schedule popover and the recipient-suggest dropdown. The scale below is a judgment-call extension to cover the stacking contexts the guide's components imply (sticky sidebar, popovers, modals, toasts). Adjust as the guide formalizes this. */ --z-base: 0; --z-sticky: 100; /* sticky sidebar, sticky table headers */ --z-dropdown: 500; /* recipient suggest, schedule send popover */ --z-popover: 1000; /* tooltips, contextual popovers */ --z-modal: 2000; /* modal backdrop + dialog */ --z-toast: 3000; /* toasts always on top */ /* ============================================================ 7. TRANSITIONS / MOTION ============================================================ Note: the guide does NOT document a formal motion scale. Durations below are extracted from the actual transition declarations used across the guide CSS (0.1s, 0.12s, 0.15s, 0.2s — 0.15s is by far the most common). No easing function is specified anywhere in the guide, so all transitions inherit the browser default (`ease`). */ --duration-fast: 100ms; /* tight micro-interactions (e.g. dropdown item bg) */ --duration-quick: 120ms; /* small hover state changes */ --duration-base: 150ms; /* default — links, ghost buttons, inputs */ --duration-slow: 200ms; /* primary buttons, larger transitions */ --easing-default: ease; /* guide does not specify; browser default */ /* ============================================================ 8. LAYOUT ============================================================ Structural dimensions, content-width constraints, and responsive breakpoints. */ /* ----- Structural dimensions ----- Fixed-size shell elements (sidebar, topbar, rail). These should be referenced anywhere a layout needs to align with or offset around a shell element. */ --sidebar-width: 240px; /* primary left sidebar */ --topbar-height: 56px; /* app shell top bar */ --inbox-rail-width: 64px; /* inbox channel rail (icon-only column) */ /* ----- Content-width constraints ----- Used to cap the width of page bodies and side panels in layouts where readable line length or panel proportion matters. */ --max-width-narrow: 1280px; /* narrow page max-width — settings, detail views */ --width-side-panel: 360px; /* docked side panel width — info sidebar, contact panel */ /* ----- Breakpoints ----- Three responsive tiers: wide desktop, tablet, mobile. Important caveat: CSS custom properties cannot be used inside @media queries. These tokens exist for documentation, JS use, and container-query future-proofing — but media queries must still use the literal pixel values until preprocessing or container queries are adopted. Keep media queries in sync with these values manually. */ --bp-wide: 1280px; /* wide desktop */ --bp-tablet: 1000px; /* tablet / narrow desktop */ --bp-mobile: 640px; /* mobile */ /* ============================================================ 9. SHORTHAND ALIASES ============================================================ Terse names used by page-specific stylesheets. Each one resolves to a canonical --color-* token above so future palette changes propagate automatically. */ --bg: var(--color-bg); --bg-hover: var(--color-bg-hover); --bg-off: var(--color-bg-off); --fg1: var(--color-text); --fg2: var(--color-text-secondary); --fg3: var(--color-text-dim); --blue: var(--color-blue); --blue-dark: var(--color-blue-dark); --blue-pale: var(--color-blue-pale); --border: var(--color-border); --border-hover: var(--color-border-hover); --border-light: var(--color-border-light); --red: var(--color-red); --focus-ring: var(--color-focus-ring); }