/* * Atlas Platform - CSS Variables * * This file defines the core design tokens for theming the Atlas Platform. * All Atlas components should use these variables for consistent styling. * * Naming Convention: --at-{category}-{property}[-{variant}] * Categories: color, spacing, border, shadow, font, transition */ :root { /* ========================================================================== COLOR PALETTE - Primary ========================================================================== */ /* Primary brand color - used for primary actions, links, active states. ALIAS ONLY. The brand accent is defined once, hue-derived, in the EDITORIAL TOKENS block further down. These `primary` names are retained because DB-stored client pages reference `text-primary` / `bg-primary` as literal strings in LayoutDefinition JSON and cannot be migrated from this repository. New Part markup uses `accent`. See docs/parts-styling-contract.md section 5. */ --at-primary: var(--at-accent); --at-primary-hover: var(--at-accent-hover); --at-primary-active: var(--at-accent-active); --at-primary-light: var(--at-accent-soft); --at-primary-dark: var(--at-accent-ink); /* Secondary color - used for secondary actions, less prominent elements. Derived from the tinted grey ramp so it stays in the accent's family. */ --at-secondary: var(--at-gray-500); --at-secondary-hover: var(--at-gray-600); --at-secondary-active: var(--at-gray-700); --at-secondary-light: var(--at-gray-100); --at-secondary-dark: var(--at-gray-700); /* ========================================================================== COLOR PALETTE - Semantic ALIAS ONLY. Status colour is defined once in the EDITORIAL TOKENS block as --at-status-*. These names previously held independent Bootstrap hex values, which meant Atlas shipped two different answers to "what colour is a warning". Retained for DB-stored client pages and legacy Razor. DESIGN-PRINCIPLES section 2: status hues are fixed and never follow the brand accent. ========================================================================== */ /* Success - confirmations, positive feedback, completed states */ --at-success: var(--at-status-success); --at-success-hover: var(--at-status-success-ink); --at-success-active: var(--at-status-success-ink); --at-success-light: var(--at-status-success-soft); --at-success-dark: var(--at-status-success-ink); /* Danger - errors, destructive actions, alerts */ --at-danger: var(--at-status-danger); --at-danger-hover: var(--at-status-danger-ink); --at-danger-active: var(--at-status-danger-ink); --at-danger-light: var(--at-status-danger-soft); --at-danger-dark: var(--at-status-danger-ink); /* Warning - caution, pending states, important notices */ --at-warning: var(--at-status-warning); --at-warning-hover: var(--at-status-warning-ink); --at-warning-active: var(--at-status-warning-ink); --at-warning-light: var(--at-status-warning-soft); --at-warning-dark: var(--at-status-warning-ink); /* Info - informational messages, help text */ --at-info: var(--at-status-info); --at-info-hover: var(--at-status-info-ink); --at-info-active: var(--at-status-info-ink); --at-info-light: var(--at-status-info-soft); --at-info-dark: var(--at-status-info-ink); /* ========================================================================== COLOR PALETTE - Neutrals ========================================================================== */ /* Light shades - backgrounds, cards, subtle borders */ --at-light: #f8f9fa; --at-light-hover: #f9fafb; --at-light-active: #f9fafb; --at-light-rgb: 248, 249, 250; /* Dark shades - text, dark backgrounds */ --at-dark: #212529; --at-dark-hover: #1c1f23; --at-dark-active: #1a1e21; --at-dark-rgb: 33, 37, 41; /* White and black */ --at-white: #ffffff; --at-black: #000000; /* Gray scale — tinted toward --at-accent-hue (DESIGN-PRINCIPLES §2; WS1). Perceptually subtle (chroma 0.005–0.015) but cohesive with the brand accent. */ --at-gray-50: oklch(98% 0.005 var(--at-accent-hue, 255)); --at-gray-100: oklch(95% 0.005 var(--at-accent-hue, 255)); --at-gray-200: oklch(92% 0.008 var(--at-accent-hue, 255)); --at-gray-300: oklch(85% 0.010 var(--at-accent-hue, 255)); --at-gray-400: oklch(70% 0.012 var(--at-accent-hue, 255)); --at-gray-500: oklch(55% 0.015 var(--at-accent-hue, 255)); --at-gray-600: oklch(45% 0.015 var(--at-accent-hue, 255)); --at-gray-700: oklch(35% 0.012 var(--at-accent-hue, 255)); --at-gray-800: oklch(25% 0.010 var(--at-accent-hue, 255)); --at-gray-900: oklch(15% 0.008 var(--at-accent-hue, 255)); /* ========================================================================== COLOR PALETTE - UI Elements ========================================================================== */ /* Body — off-white canvas so white cards read as elevated (M3 tonal surface layering). Reverted from #ffffff, which regressed page==card (no contrast). */ --at-body-bg: var(--at-gray-50); --at-body-color: var(--at-gray-900); /* Surface — alias for body background; consumed by App.razor loading screens and any part that wants "the canvas behind cards" without re-deriving it. */ --at-surface: var(--at-body-bg); /* Text colors */ --at-text-primary: var(--at-gray-900); --at-text-secondary: var(--at-gray-600); --at-text-muted: var(--at-gray-500); --at-text-light: #f8f9fa; --at-text-dark: #212529; /* Link colors */ --at-link-color: var(--at-primary); --at-link-hover-color: var(--at-primary-hover); --at-link-visited-color: #551a8b; /* ========================================================================== COLOR PALETTE - Component-Specific ========================================================================== */ /* Header/Navbar */ --at-header-bg: #212529; --at-header-color: #ffffff; --at-header-border: rgba(255, 255, 255, 0.1); /* Sidebar */ --at-sidebar-bg: #ffffff; --at-sidebar-color: #212529; --at-sidebar-hover-bg: #e9ecef; --at-sidebar-active-bg: var(--at-primary-light); --at-sidebar-active-color: var(--at-primary-dark); --at-sidebar-border: #dee2e6; /* Cards */ --at-card-bg: var(--at-white); --at-card-color: var(--at-gray-900); --at-card-border: var(--at-gray-200); --at-card-header-bg: #ffffff; /* M3: uniform white card surface (was #f8f9fa grey header band) */ --at-card-header-color: #212529; --at-card-footer-bg: #f8f9fa; /* Tables */ --at-table-bg: transparent; --at-table-color: #212529; --at-table-border: #dee2e6; --at-table-border-color: #dee2e6; --at-table-striped-bg: color-mix(in oklch, var(--at-gray-900) 3%, transparent); --at-table-hover-bg: color-mix(in oklch, var(--at-gray-900) 5%, transparent); --at-table-active-bg: color-mix(in oklch, var(--at-accent) 10%, transparent); --at-table-active-color: var(--at-text-primary); --at-table-header-bg: #f8f9fa; --at-table-header-color: #495057; --at-table-cell-padding: 0.75rem; --at-table-cell-padding-sm: 0.5rem; --at-table-cell-padding-lg: 1rem; /* Lists */ --at-list-bg: transparent; --at-list-color: #212529; --at-list-border: #dee2e6; --at-list-item-padding: 0.75rem 1rem; --at-list-item-padding-sm: 0.5rem 0.75rem; --at-list-item-padding-lg: 1rem 1.25rem; --at-list-striped-bg: rgba(0, 0, 0, 0.02); --at-list-hover-bg: rgba(0, 0, 0, 0.04); --at-list-active-bg: color-mix(in oklch, var(--at-accent) 10%, transparent); --at-list-active-color: var(--at-text-primary); --at-list-selected-bg: color-mix(in oklch, var(--at-accent) 15%, transparent); --at-list-selected-color: var(--at-primary-dark); --at-list-disabled-color: var(--at-text-muted); --at-list-disabled-bg: var(--at-gray-100); /* Details (key-value pairs) */ --at-detail-bg: transparent; --at-detail-color: #212529; --at-detail-border: #dee2e6; --at-detail-item-padding: 0.75rem 0; --at-detail-item-padding-sm: 0.5rem 0; --at-detail-item-padding-lg: 1rem 0; --at-detail-field-color: var(--at-text-secondary); --at-detail-field-width: 35%; --at-detail-field-min-width: 120px; --at-detail-value-color: var(--at-text-primary); --at-detail-striped-bg: rgba(0, 0, 0, 0.02); --at-detail-hover-bg: rgba(0, 0, 0, 0.04); /* Forms */ --at-input-bg: #ffffff; --at-input-color: var(--at-gray-900); --at-input-border: var(--at-gray-300); --at-input-focus-border: var(--at-primary); --at-input-focus-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--at-accent) 25%, transparent); --at-input-placeholder: var(--at-gray-500); --at-input-disabled-bg: var(--at-gray-100); --at-input-valid-border: var(--at-success); --at-input-invalid-border: var(--at-danger); --at-form-label-width: 30%; /* Buttons */ --at-btn-padding-y: 0.375rem; --at-btn-padding-x: 0.75rem; --at-btn-font-size: var(--at-font-size-base); --at-btn-line-height: var(--at-line-height-base); --at-btn-font-weight: var(--at-font-weight-normal); --at-btn-border-width: var(--at-border-width); --at-btn-border-radius: var(--at-border-radius); --at-btn-focus-shadow-width: 0.25rem; --at-btn-disabled-opacity: 0.65; /* Button small */ --at-btn-padding-y-sm: 0.25rem; --at-btn-padding-x-sm: 0.5rem; --at-btn-font-size-sm: var(--at-font-size-sm); --at-btn-border-radius-sm: var(--at-border-radius-sm); /* Button large */ --at-btn-padding-y-lg: 0.5rem; --at-btn-padding-x-lg: 1rem; --at-btn-font-size-lg: var(--at-font-size-lg); --at-btn-border-radius-lg: var(--at-border-radius-lg); /* ========================================================================== SPACING ========================================================================== */ /* Base spacing unit (used for calculations) */ --at-spacing-unit: 0.25rem; /* Spacing scale */ --at-spacing-0: 0; --at-spacing-1: 0.25rem; /* 4px */ --at-spacing-2: 0.5rem; /* 8px */ --at-spacing-3: 1rem; /* 16px */ --at-spacing-4: 1.5rem; /* 24px */ --at-spacing-5: 3rem; /* 48px */ /* Named spacing for semantic use */ --at-spacing-xs: var(--at-spacing-1); --at-spacing-sm: var(--at-spacing-2); --at-spacing-md: var(--at-spacing-3); --at-spacing-lg: var(--at-spacing-4); --at-spacing-xl: var(--at-spacing-5); /* Component-specific spacing */ --at-gutter-x: 1.5rem; --at-gutter-y: 0; --at-section-spacing: 2rem; --at-card-spacing: 1rem; --at-form-group-spacing: 1rem; /* ========================================================================== BORDERS ========================================================================== */ /* Border widths */ --at-border-width: 1px; --at-border-width-2: 2px; --at-border-width-3: 3px; --at-border-width-4: 4px; --at-border-width-5: 5px; /* Border colors */ --at-border-color: var(--at-gray-200); --at-border-color-light: var(--at-gray-100); --at-border-color-dark: var(--at-gray-400); --at-border-color-translucent: rgba(0, 0, 0, 0.175); /* Border radius - ALIAS ONLY. Three canonical radii are defined in the EDITORIAL TOKENS block: --at-radius-sm (8px), --at-radius-md (12px), --at-radius-pill. These legacy names previously held six values, two of which collided (at-md and at-lg were both 12px) and one of which was inverted (at-sm 4px was SMALLER than at 6px). Retained for DB-stored client pages. See docs/parts-styling-contract.md section 5. */ --at-border-radius: var(--at-radius-sm); --at-border-radius-sm: var(--at-radius-sm); --at-border-radius-lg: var(--at-radius-md); --at-border-radius-xl: var(--at-radius-md); --at-border-radius-pill: var(--at-radius-pill); --at-border-radius-circle: var(--at-radius-pill); /* Shorthand borders */ --at-border: var(--at-border-width) solid var(--at-border-color); --at-border-light: var(--at-border-width) solid var(--at-border-color-light); --at-border-dark: var(--at-border-width) solid var(--at-border-color-dark); /* ========================================================================== SHADOWS ========================================================================== */ /* Box shadows - ALIAS ONLY. Two canonical elevations plus the focus ring. Atlas previously shipped ten shadow tokens for thirty-four usages, which is how two Parts sitting side by side ended up on different elevations. Canonical: --at-shadow-rest, --at-shadow-float, --at-focus-shadow. */ --at-shadow-sm: var(--at-shadow-rest); --at-shadow: var(--at-shadow-float); --at-shadow-lg: var(--at-shadow-float); /* Inset shadows */ --at-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075); /* Focus shadows (for form elements) */ --at-focus-shadow: 0 0 0 0.25rem color-mix(in oklch, var(--at-accent) 25%, transparent); --at-focus-shadow-danger: 0 0 0 0.25rem color-mix(in oklch, var(--at-status-danger) 25%, transparent); --at-focus-shadow-success: 0 0 0 0.25rem color-mix(in oklch, var(--at-status-success) 25%, transparent); /* Elevated shadow (for dropdowns, modals) - alias */ --at-shadow-dropdown: var(--at-shadow-float); --at-shadow-modal: var(--at-shadow-float); /* No shadow */ --at-shadow-none: none; /* ========================================================================== TYPOGRAPHY ========================================================================== */ /* Font families */ --at-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --at-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Font sizes */ --at-font-size-base: 1rem; --at-font-size-xs: 0.75rem; --at-font-size-sm: 0.875rem; --at-font-size-lg: 1.25rem; --at-font-size-xl: 1.5rem; /* Heading sizes */ --at-h1-font-size: 2.5rem; --at-h2-font-size: 2rem; --at-h3-font-size: 1.75rem; --at-h4-font-size: 1.5rem; --at-h5-font-size: 1.25rem; --at-h6-font-size: 1rem; /* Font weights */ --at-font-weight-light: 300; --at-font-weight-normal: 400; --at-font-weight-medium: 500; --at-font-weight-semibold: 600; --at-font-weight-bold: 700; /* Line heights */ --at-line-height-base: 1.5; --at-line-height-sm: 1.25; --at-line-height-lg: 2; /* ========================================================================== TRANSITIONS ========================================================================== */ /* Duration */ --at-transition-duration: 0.15s; --at-transition-duration-fast: 0.1s; --at-transition-duration-slow: 0.3s; /* Easing */ --at-transition-timing: ease-in-out; /* Common transitions */ --at-transition-base: all var(--at-transition-duration) var(--at-transition-timing); --at-transition-fade: opacity var(--at-transition-duration) linear; --at-transition-collapse: height var(--at-transition-duration-slow) var(--at-transition-timing); /* ========================================================================== Z-INDEX SCALE ========================================================================== */ --at-zindex-dropdown: 1000; --at-zindex-sticky: 1020; --at-zindex-fixed: 1030; --at-zindex-offcanvas-backdrop: 1040; --at-zindex-offcanvas: 1045; --at-zindex-modal-backdrop: 1050; --at-zindex-modal: 1055; --at-zindex-popover: 1070; --at-zindex-tooltip: 1080; --at-zindex-toast: 1090; /* ========================================================================== LAYOUT ========================================================================== */ /* Container max-widths */ --at-container-sm: 540px; --at-container-md: 720px; --at-container-lg: 960px; --at-container-xl: 1140px; --at-container-xxl: 1320px; /* Header height */ --at-header-height: 56px; /* Sidebar width — dynamic: scales with viewport, clamped between 200–240px */ --at-sidebar-width: clamp(200px, 16vw, 240px); --at-sidebar-collapsed-width: 64px; /* Section strip height (mobile responsive nav) */ --at-section-strip-height: 40px; /* Footer height */ --at-footer-height: 48px; /* ========================================================================== WS1 — EDITORIAL TOKENS (DESIGN-PRINCIPLES §1–§4 + Impeccable) Additive layer. Existing tokens above stay intact; downstream parts use these for editorial typography, accent, rhythm, motion. Per-site override: :root { --at-accent-hue: 165; } (e.g. MotorhomeClub forest/teal) ========================================================================== */ /* ---- THE BRAND ACCENT ------------------------------------------------- Single brand hue. Every accent and every tinted neutral in Atlas derives from this one value. It is the ONLY colour token a client deployment may override. See docs/BRAND.md section 7 (client theming contract). A client sets it in their own stylesheet, for example MotorhomeClub forest: :root { --at-accent-hue: 165; } -------------------------------------------------------------------- */ --at-accent-hue: 255; /* platform default (Atlas blue) */ /* Accent ramp (OKLCH; vary lightness, hold chroma + hue). Deliberately NOT #0d6efd. That is the Bootstrap 5 default and reads as an unstyled template. See docs/BRAND.md section 4. */ --at-accent: oklch(56% 0.16 var(--at-accent-hue)); --at-accent-hover: oklch(50% 0.16 var(--at-accent-hue)); --at-accent-active: oklch(45% 0.15 var(--at-accent-hue)); --at-accent-ink: oklch(43% 0.14 var(--at-accent-hue)); --at-accent-soft: oklch(96% 0.025 var(--at-accent-hue)); /* Status — fixed hues, independent of the brand accent (DESIGN-PRINCIPLES section 2). A client themed to hue 165 must still show overdue in red. Solids sit at L 52% so they clear 4.5:1 as text on white and on -soft. Each ships a soft (background) and an ink (text on soft). */ --at-status-success: oklch(52% 0.13 155); --at-status-success-soft: oklch(95% 0.035 155); --at-status-success-ink: oklch(42% 0.11 155); --at-status-warning: oklch(52% 0.11 75); --at-status-warning-soft: oklch(95% 0.040 75); --at-status-warning-ink: oklch(42% 0.09 75); --at-status-danger: oklch(52% 0.16 25); --at-status-danger-soft: oklch(95% 0.035 25); --at-status-danger-ink: oklch(42% 0.14 25); --at-status-info: oklch(52% 0.11 230); --at-status-info-soft: oklch(95% 0.035 230); --at-status-info-ink: oklch(42% 0.09 230); /* Type scale — 1.2 ratio (minor third), fixed not fluid (product UI) */ --at-text-eyebrow: 0.6875rem; /* 11px — uppercase + letter-spacing 0.12em */ --at-text-meta: 0.75rem; /* 12px */ --at-text-label: 0.8125rem; /* 13px */ --at-text-body: 1rem; /* 16px — Impeccable minimum */ --at-text-h2: 1.125rem; /* 18px — card section title */ --at-text-h1: 1.375rem; /* 22px — page title */ --at-text-display: 1.75rem; /* 44px — PageHeader hero */ --at-leading-tight: 1.2; --at-leading-snug: 1.35; --at-leading-normal: 1.5; /* body — yields 24px rhythm at 16px */ /* 4pt spacing scale (DESIGN-PRINCIPLES §3) */ --at-space-1: 4px; --at-space-2: 8px; --at-space-3: 12px; --at-space-4: 16px; --at-space-5: 20px; --at-space-6: 24px; --at-space-7: 32px; --at-space-8: 48px; --at-space-9: 64px; --at-space-10: 96px; /* Rhythm aliases (semantic — name by relationship, not value) */ --at-page-pad-x: var(--at-space-6); --at-page-pad-y: var(--at-space-6); --at-section-gap: var(--at-space-6); --at-card-gap: var(--at-space-5); --at-field-gap: var(--at-space-4); --at-card-pad: var(--at-space-6); /* Elevation - canonical. Subtle by design: if you can clearly see the shadow, it is too strong. Two levels only, plus the focus ring. */ --at-shadow-rest: 0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03); --at-shadow-float: 0 6px 24px -12px oklch(0% 0 0 / 0.18), 0 2px 4px oklch(0% 0 0 / 0.04); /* Legacy WS1 names, retained as aliases */ --at-shadow-card-rest: var(--at-shadow-rest); --at-shadow-card-float: var(--at-shadow-float); /* Radii - canonical. Three values, nothing else. sm = inputs, buttons, badges, icon bubbles md = cards, panels, modals, tiles pill = pills, status dots, avatars */ --at-radius-sm: 8px; --at-radius-md: 12px; --at-radius-pill: 999px; /* Legacy editorial sizes, retained as aliases */ --at-radius-lg: var(--at-radius-md); --at-radius-2xl: var(--at-radius-md); /* Motion (DESIGN-PRINCIPLES §4) */ --at-duration-micro: 150ms; /* button press, toggle */ --at-duration-state: 200ms; /* hover, menu open — product default */ --at-duration-shift: 300ms; /* accordion, drawer */ --at-duration-entrance: 500ms; /* hero reveal */ --at-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* default entrance */ --at-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --at-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --at-ease-in-quart: cubic-bezier(0.7, 0, 0.84, 0); /* exits */ --at-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* toggles */ /* Breakpoints (content-driven; three is enough per §6) */ --at-breakpoint-sm: 640px; --at-breakpoint-md: 768px; --at-breakpoint-lg: 1024px; /* WS2 sticky-column kicks in here */ } /* ========================================================================== WS1 — GLOBAL POLISH (DESIGN-PRINCIPLES §1, §4, §5) Free wins that improve every page; applied outside :root so they actually take effect on document elements. ========================================================================== */ h1, h2, h3 { text-wrap: balance; } article p { text-wrap: pretty; } /* :focus-visible — keyboard users get the ring, mouse users don't (§5) */ *:focus { outline: none; } *:focus-visible { outline: 2px solid var(--at-accent); outline-offset: 2px; } /* Reduced motion — non-optional accessibility (§4). Vestibular disorders affect ~35% of adults over 40. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* WS4 — 44px tap target on touch input (DESIGN-PRINCIPLES §6). Touch input, regardless of viewport width. Visual size can stay smaller via pseudo-element padding (icon-only buttons); base controls bump to 44px tall. */ @media (pointer: coarse) { button, [role="button"], a[href], input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]), select, textarea { min-height: 44px; } }