/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 *
 * Design System Files:
 * - design-tokens.css: Color palette with CSS custom properties
 * - design-system/typography.css: Typography scale with CSS custom properties
 * - design-system.css: Spacing scale with CSS custom properties (--space-*)
 *
 * Component Files:
 * - buttons.css: Button component with variants and sizes
 * - card.css: Card component with multiple layouts
 * - form-inputs.css: Form inputs, textareas, selects, checkboxes, and radio buttons
 *
 * Responsive Files:
 * - mobile-responsive.css: Mobile optimization with touch-friendly targets,
 *   responsive layouts, and breakpoint-specific adjustments for all pages.
 *   Breakpoints: Desktop (>900px), Tablet (768-900px), Mobile (480-768px), Small (<480px)
 *
 * Available color variables (design-tokens.css):
 *   Primary: --color-primary-50 through --color-primary-900 (brand colors)
 *   Secondary: --color-secondary-50 through --color-secondary-900 (supporting colors)
 *   Success: --color-success-50 through --color-success-900 (positive states)
 *   Warning: --color-warning-50 through --color-warning-900 (caution states)
 *   Error: --color-error-50 through --color-error-900 (error/destructive states)
 *   Neutral: --color-neutral-50 through --color-neutral-900, --color-neutral-white, --color-neutral-black
 *   Semantic aliases: --color-bg-*, --color-text-*, --color-border-*, --color-interactive-*, --color-status-*
 *   Focus: --color-focus-ring, --color-focus-ring-offset
 *   Shadows: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl
 *
 * Available typography variables:
 *   --font-family-sans, --font-family-serif, --font-family-mono (font families)
 *   --text-xs through --text-6xl (font sizes)
 *   --font-normal through --font-bold (font weights)
 *   --leading-tight through --leading-loose (line heights)
 *   --tracking-tight through --tracking-wide (letter spacing)
 *   Utility classes: .text-*, .font-*, .heading-*, .display-*
 *
 * Available spacing variables:
 *   --space-0 through --space-32 (numeric scale based on 4px/0.25rem)
 *   --space-component-*, --space-gap-*, --space-stack-* (semantic aliases)
 *   Utility classes: .m-*, .p-*, .gap-* for quick application
 */