/* ==========================================================================
   FiftyPlus Design System
   Main Entry Point - Bundled Version

   CSS Layer Architecture:
   - reset: Baseline styles, lowest priority
   - bootstrap: Reserved for Bootstrap overrides (Bootstrap loads separately)
   - tokens: Design token definitions (colors, typography, spacing)
   - components: Shared component styles (Phase 42-43)
   - utilities: Utility classes (Phase 40-41)

   Layer order determines cascade priority. Later layers override earlier ones.
   ========================================================================== */

/* Declare layer order - this determines cascade priority */
@layer reset, bootstrap, tokens, components, utilities;

/* ==========================================================================
   Reset Layer
   Minimal CSS reset establishing baseline styles.
   ========================================================================== */
@layer reset {
/* ==========================================================================
   CSS Reset
   FiftyPlus Design System

   Minimal reset establishing baseline styles. Applied at lowest priority
   via @layer reset in fiftyplus.css.
   ========================================================================== */

/* Box sizing for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
* {
  margin: 0;
  padding: 0;
}

/* Set 18px base font for accessibility (50+ demographic) */
html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Body defaults */
body {
  margin: 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Global focus ring - visible on ALL focus per CONTEXT.md (A11Y-01)
   50+ demographic benefits from consistent focus feedback on both keyboard and mouse */
:focus {
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
}

/* Remove outline when component provides its own focus ring */
.fp-btn:focus,
.fp-form-control:focus,
.fp-form-select:focus,
.fp-form-check-input:focus,
.fp-form-switch-input:focus,
.fp-form-range:focus,
.fp-alert-dismiss:focus,
.fp-table-responsive:focus {
  outline: none;
}

/* Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Remove built-in form typography styles */
input,
button,
textarea,
select {
  font: inherit;
}

/* Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* Reduced motion preference (A11Y-03)
   Per CONTEXT.md: shorten durations to 50ms, don't remove entirely.
   This provides subtle feedback without triggering motion sensitivity. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 50ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 50ms !important;
    scroll-behavior: auto !important;
  }
}
}

/* ==========================================================================
   Bootstrap Layer (Reserved)
   Bootstrap loads separately outside the layer system via <link> tag.
   This layer exists for ordering purposes - any Bootstrap overrides
   written in this layer will have appropriate priority.
   ========================================================================== */
@layer bootstrap {
  /* Bootstrap overrides go here if needed */
}

/* ==========================================================================
   Tokens Layer
   Design tokens providing single source of truth for design values.
   ========================================================================== */
@layer tokens {
/* ==========================================================================
   Design Tokens
   FiftyPlus Design System

   Single source of truth for design values. All tokens use --fp-* namespace
   to avoid collisions with existing CSS variables.

   Token Categories:
   1. Primitive Tokens - Raw palette values
   2. Semantic Tokens - Purpose-based aliases
   3. Text Tokens - Typography colors
   4. Typography Tokens - Font sizes, weights, line heights
   5. Spacing Tokens - 4px base unit scale
   6. Shadow Tokens - Elevation levels
   7. Border Radius Tokens - Corner rounding
   ========================================================================== */

:root {
  /* ==========================================================================
     1. PRIMITIVE TOKENS - Raw Palette Values
     Colors with 3 shades: light, base, dark
     ========================================================================== */

  /* Green - Brand Primary */
  --fp-green-light: #4A8A77;
  --fp-green: #3A6C5D;
  --fp-green-dark: #2A5246;

  /* Lime - Brand Secondary/Accent */
  --fp-lime-light: #D4FDCA;
  --fp-lime: #B9FB9F;
  --fp-lime-dark: #8CD975;

  /* Teal - Serene Primary */
  --fp-teal-light: #4A7C6B;
  --fp-teal: #2D5A4A;
  --fp-teal-dark: #1E4035;

  /* Sage - Serene Accent (replaces gold) */
  --fp-sage-light: #C5E0D4;
  --fp-sage: #8BC4A9;
  --fp-sage-dark: #5FA384;

  /* Gray Scale */
  --fp-gray-50: #F9FAFB;
  --fp-gray-100: #F3F4F6;
  --fp-gray-200: #E5E7EB;
  --fp-gray-300: #D1D5DB;
  --fp-gray-400: #9CA3AF;
  --fp-gray-500: #6B7280;
  --fp-gray-600: #4B5563;
  --fp-gray-700: #374151;
  --fp-gray-800: #1F2937;
  --fp-gray-900: #111827;

  /* Red - Danger States */
  --fp-red-light: #FEE2E2;
  --fp-red: #EF4444;
  --fp-red-dark: #B91C1C;

  /* Amber - Warning States */
  --fp-amber-light: #FEF3C7;
  --fp-amber: #F59E0B;
  --fp-amber-dark: #B45309;

  /* Emerald - Success States */
  --fp-emerald-light: #D1FAE5;
  --fp-emerald: #10B981;
  --fp-emerald-dark: #047857;

  /* Blue - Info States */
  --fp-blue-light: #DBEAFE;
  --fp-blue: #3B82F6;
  --fp-blue-dark: #1D4ED8;

  /* ==========================================================================
     2. SEMANTIC TOKENS - Purpose-Based Aliases
     Map semantic meanings to palette values
     ========================================================================== */

  /* Primary - Main brand color (green) */
  --fp-primary-light: var(--fp-green-light);
  --fp-primary: var(--fp-green);
  --fp-primary-dark: var(--fp-green-dark);

  /* Secondary - Supporting color (lime) */
  --fp-secondary-light: var(--fp-lime-light);
  --fp-secondary: var(--fp-lime);
  --fp-secondary-dark: var(--fp-lime-dark);

  /* Accent - Highlight color (lime) */
  --fp-accent: var(--fp-lime);

  /* State Colors */
  --fp-success: var(--fp-emerald);
  --fp-warning: var(--fp-amber);
  --fp-danger: var(--fp-red);
  --fp-info: var(--fp-blue);
  --fp-muted: var(--fp-gray-400);

  /* Surface Colors */
  --fp-surface: #FFFFFF;
  --fp-background: #F7FBFE;
  --fp-border: var(--fp-gray-200);

  /* ==========================================================================
     3. TEXT TOKENS - Typography Colors
     Explicit text color control independent of semantic colors
     ========================================================================== */

  --fp-text-primary: var(--fp-gray-800);
  --fp-text-secondary: var(--fp-gray-600);
  --fp-text-muted: var(--fp-gray-500);
  --fp-text-on-primary: #FFFFFF;
  --fp-text-on-secondary: var(--fp-gray-800);
  --fp-text-danger: var(--fp-red-dark);
  --fp-text-success: var(--fp-emerald-dark);
  --fp-text-warning: var(--fp-amber-dark);
  --fp-text-info: var(--fp-blue-dark);

  /* ==========================================================================
     4. TYPOGRAPHY TOKENS
     18px base font size for 50+ accessibility
     ========================================================================== */

  /* Font Sizes - T-shirt naming
     Base: 18px (set on html in _reset.css)
     All sizes calculated relative to 18px base */
  --fp-text-sm: 0.889rem;     /* 16px */
  --fp-text-base: 1rem;       /* 18px */
  --fp-text-lg: 1.333rem;     /* 24px */
  --fp-text-xl: 1.556rem;     /* 28px */
  --fp-text-2xl: 1.778rem;    /* 32px */
  --fp-text-3xl: 2.222rem;    /* 40px */

  /* Line Heights - Matched to font sizes */
  --fp-leading-sm: 1.5;       /* For text-sm */
  --fp-leading-base: 1.6;     /* For text-base */
  --fp-leading-lg: 1.4;       /* For text-lg */
  --fp-leading-xl: 1.35;      /* For text-xl */
  --fp-leading-2xl: 1.3;      /* For text-2xl */
  --fp-leading-3xl: 1.2;      /* For text-3xl */

  /* Font Weights */
  --fp-font-normal: 400;
  --fp-font-medium: 500;
  --fp-font-semibold: 600;
  --fp-font-bold: 700;

  /* ==========================================================================
     5. SPACING TOKENS
     4px base unit, numeric naming
     ========================================================================== */

  --fp-space-0: 0;
  --fp-space-1: 0.222rem;     /* 4px */
  --fp-space-2: 0.444rem;     /* 8px */
  --fp-space-3: 0.667rem;     /* 12px */
  --fp-space-4: 0.889rem;     /* 16px */
  --fp-space-5: 1.111rem;     /* 20px */
  --fp-space-6: 1.333rem;     /* 24px */
  --fp-space-8: 1.778rem;     /* 32px */
  --fp-space-10: 2.222rem;    /* 40px */
  --fp-space-12: 2.667rem;    /* 48px */
  --fp-space-16: 3.556rem;    /* 64px */

  /* ==========================================================================
     6. SHADOW TOKENS
     Elevation levels for visual depth
     ========================================================================== */

  --fp-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
  --fp-shadow-card: 0 4px 16px rgba(0, 0, 0, 0.06);
  --fp-shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* ==========================================================================
     7. BORDER RADIUS TOKENS
     Corner rounding scale
     ========================================================================== */

  --fp-radius-sm: 0.444rem;   /* 8px */
  --fp-radius-md: 0.667rem;   /* 12px */
  --fp-radius-lg: 0.889rem;   /* 16px */
  --fp-radius-full: 9999px;   /* Pill shape */

  /* ==========================================================================
     8. BUTTON TOKENS
     Interactive element sizing and focus states
     ========================================================================== */

  /* Button heights - 52px default for 50+ accessibility */
  --fp-btn-height: 2.889rem;      /* 52px */
  --fp-btn-height-sm: 2.444rem;   /* 44px */
  --fp-btn-height-lg: 3.333rem;   /* 60px */

  /* Focus ring - glow effect using primary color */
  --fp-focus-ring-width: 3px;
  --fp-focus-ring-color: rgba(58, 108, 93, 0.25);
  --fp-focus-ring-offset: 2px;

  /* Transition timing */
  --fp-transition-fast: 150ms ease;
  --fp-transition-normal: 200ms ease;

  /* ==========================================================================
     9. FORM TOKENS
     Input sizing and states
     ========================================================================== */

  /* Form control heights - match button heights */
  --fp-input-height: var(--fp-btn-height);       /* 52px */
  --fp-input-height-sm: var(--fp-btn-height-sm); /* 44px */
  --fp-input-height-lg: var(--fp-btn-height-lg); /* 60px */

  /* Floating label transition */
  --fp-label-transition: transform 150ms ease, font-size 150ms ease;

  /* Input border color (light gray at rest per CONTEXT.md) */
  --fp-input-border: var(--fp-gray-300);
  --fp-input-border-focus: var(--fp-primary);
}

/* ==========================================================================
   Brand Theme - FiftyPlus.Website

   This is the default theme - no body class needed.
   Uses green primary + lime accent from base tokens.

   The brand theme documents the default values and provides
   Bootstrap variable overrides for consistency.
   ========================================================================== */

:root {
  /* ==========================================================================
     Bootstrap Variable Overrides
     Map Bootstrap variables to FiftyPlus design tokens for seamless integration
     ========================================================================== */

  /* Primary color - Brand green */
  --bs-primary: var(--fp-primary);
  --bs-primary-rgb: 58, 108, 93;

  /* Secondary color - Brand lime */
  --bs-secondary: var(--fp-secondary);
  --bs-secondary-rgb: 185, 251, 159;

  /* Body colors */
  --bs-body-color: var(--fp-text-primary);
  --bs-body-bg: var(--fp-background);

  /* Link colors */
  --bs-link-color: var(--fp-primary);
  --bs-link-hover-color: var(--fp-primary-dark);

  /* Border color */
  --bs-border-color: var(--fp-border);
}

/* ==========================================================================
   Serene Vitality Theme - FiftyPlus.Members & FiftPlus.Vault

   Activated by adding class="theme-serene" to body element.
   Uses teal primary + sage accent for a calming, natural feel suited
   to the member portal and admin dashboard experiences.
   ========================================================================== */

body.theme-serene {
  /* ==========================================================================
     Override Primary Palette to Teal
     Teal provides a calmer, more trustworthy feel for authenticated areas
     ========================================================================== */
  --fp-primary-light: var(--fp-teal-light);
  --fp-primary: var(--fp-teal);
  --fp-primary-dark: var(--fp-teal-dark);

  /* ==========================================================================
     Override Accent Palette to Sage
     Sage complements teal naturally, fresh and calming
     ========================================================================== */
  --fp-accent-light: var(--fp-sage-light);
  --fp-accent: var(--fp-sage);
  --fp-accent-dark: var(--fp-sage-dark);

  /* Also update secondary to match accent for consistency */
  --fp-secondary-light: var(--fp-sage-light);
  --fp-secondary: var(--fp-sage);
  --fp-secondary-dark: var(--fp-sage-dark);

  /* ==========================================================================
     Clean, Fresh Background
     Creates a comfortable reading environment
     ========================================================================== */
  --fp-background: #F8FAFA;
  --fp-surface: #FFFFFF;

  /* ==========================================================================
     Bootstrap Variable Overrides for Serene Theme
     ========================================================================== */

  /* Primary - Teal */
  --bs-primary: var(--fp-primary);
  --bs-primary-rgb: 45, 90, 74;

  /* Secondary - Sage */
  --bs-secondary: var(--fp-accent);
  --bs-secondary-rgb: 139, 196, 169;

  /* Body background */
  --bs-body-bg: var(--fp-background);

  /* Link colors */
  --bs-link-color: var(--fp-primary);
  --bs-link-hover-color: var(--fp-primary-dark);
}

/* Serene theme badge overrides - use teal/sage instead of blue/emerald */
body.theme-serene .fp-badge-info {
  background-color: rgba(45, 90, 74, 0.12);
  color: var(--fp-teal-dark);
}

body.theme-serene .fp-badge-success {
  background-color: rgba(139, 196, 169, 0.25);
  color: var(--fp-sage-dark);
}
}

/* ==========================================================================
   Components Layer
   Shared component styles. Populated in Phase 42-44.
   ========================================================================== */
@layer components {
/* ==========================================================================
   Component Styles
   FiftyPlus Design System - Phase 42-44

   Components are organized by category:
   0. Accessibility (Phase 44)
   1. Buttons (Phase 42)
   2. Forms (Phase 42)
   3. Cards (Phase 43)
   4. Alerts (Phase 43)
   5. Badges (Phase 43)
   6. Tables (Phase 43)
   ========================================================================== */

/* ===== 0. ACCESSIBILITY COMPONENTS ===== */

/* A11Y-06: Skip link for keyboard navigation bypass
   Usage: Place immediately after opening body tag, before any navigation.
   Target should be first interactive element in main content.

   HTML Example:
   <a href="#main-content" class="fp-skip-link">Skip to main content</a>
   ...
   <main id="main-content" tabindex="-1">
*/
.fp-skip-link {
  position: fixed;
  top: var(--fp-space-3);
  left: var(--fp-space-3);
  z-index: 9999;
  padding: var(--fp-space-3) var(--fp-space-5);
  color: var(--fp-primary);
  font-weight: var(--fp-font-semibold);
  font-size: var(--fp-text-base);
  text-decoration: none;
  background: transparent;
  border-radius: var(--fp-radius-md);
  transform: translateY(-200%);
  transition: transform var(--fp-transition-fast);
}

/* Show skip link on focus - text only with focus ring per CONTEXT.md */
.fp-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--fp-primary);
  outline-offset: 2px;
  background: var(--fp-surface);
}

/* ===== 1. BUTTONS ===== */
/* BTN-01: Base button styles with accessible focus */
.fp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fp-space-2);
  height: var(--fp-btn-height);
  min-width: var(--fp-btn-height); /* Ensures 48px+ touch target for icon-only */
  padding: 0 var(--fp-space-6);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-font-medium);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--fp-radius-full); /* Pill shape */
  cursor: pointer;
  transition: all var(--fp-transition-normal);
  -webkit-appearance: none;
  appearance: none;
}

/* Focus state - visible ring on all focus (keyboard and mouse per CONTEXT.md) */
.fp-btn:focus {
  outline: none;
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

/* BTN-02: Primary button variant */
.fp-btn-primary {
  background-color: var(--fp-primary);
  color: var(--fp-text-on-primary);
  border-color: var(--fp-primary);
}

.fp-btn-primary:hover {
  background-color: var(--fp-primary-dark);
  border-color: var(--fp-primary-dark);
  box-shadow: var(--fp-shadow-card);
  transform: translateY(-1px);
}

.fp-btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* BTN-03: Outline button variant */
.fp-btn-outline {
  background-color: transparent;
  color: var(--fp-primary);
  border-color: var(--fp-primary);
}

.fp-btn-outline:hover {
  background-color: var(--fp-primary);
  color: var(--fp-text-on-primary);
  box-shadow: var(--fp-shadow-card);
  transform: translateY(-1px);
}

.fp-btn-outline:active {
  transform: translateY(0);
  box-shadow: none;
}

/* BTN-04: Secondary button variant */
.fp-btn-secondary {
  background-color: var(--fp-gray-100);
  color: var(--fp-text-primary);
  border-color: var(--fp-gray-200);
}

.fp-btn-secondary:hover {
  background-color: var(--fp-gray-200);
  border-color: var(--fp-gray-300);
  box-shadow: var(--fp-shadow-subtle);
  transform: translateY(-1px);
}

.fp-btn-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* BTN-05: Danger button variant */
.fp-btn-danger {
  background-color: var(--fp-danger);
  color: #FFFFFF;
  border-color: var(--fp-danger);
}

.fp-btn-danger:hover {
  background-color: var(--fp-red-dark);
  border-color: var(--fp-red-dark);
  box-shadow: var(--fp-shadow-card);
  transform: translateY(-1px);
}

.fp-btn-danger:active {
  transform: translateY(0);
  box-shadow: none;
}

/* BTN-06: Button size modifiers */
.fp-btn-sm {
  height: var(--fp-btn-height-sm);
  min-width: var(--fp-btn-height-sm);
  padding: 0 var(--fp-space-4);
  font-size: var(--fp-text-sm);
}

.fp-btn-lg {
  height: var(--fp-btn-height-lg);
  min-width: var(--fp-btn-height-lg);
  padding: 0 var(--fp-space-8);
  font-size: var(--fp-text-lg);
}

/* BTN-07: Disabled button state */
.fp-btn:disabled,
.fp-btn.fp-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* BTN-08: Touch target - already handled by min-height/min-width
   52px default height exceeds 48px minimum */

/* Icon positioning helpers */
.fp-btn-icon-left > svg,
.fp-btn-icon-left > .fp-icon {
  margin-right: var(--fp-space-1);
}

.fp-btn-icon-right > svg,
.fp-btn-icon-right > .fp-icon {
  margin-left: var(--fp-space-1);
}

/* Icon-only button - square with centered icon */
.fp-btn-icon {
  padding: 0;
  min-width: var(--fp-btn-height);
  width: var(--fp-btn-height);
}

.fp-btn-icon.fp-btn-sm {
  min-width: var(--fp-btn-height-sm);
  width: var(--fp-btn-height-sm);
}

.fp-btn-icon.fp-btn-lg {
  min-width: var(--fp-btn-height-lg);
  width: var(--fp-btn-height-lg);
}

/* ===== 2. FORMS ===== */

/* FORM-01: Form control base styles */
.fp-form-control {
  display: block;
  width: 100%;
  height: var(--fp-input-height);
  padding: var(--fp-space-3) var(--fp-space-5);
  font-size: var(--fp-text-base); /* 18px minimum per FORM-09 */
  font-weight: var(--fp-font-normal);
  line-height: var(--fp-leading-base);
  color: var(--fp-text-primary);
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-input-border);
  border-radius: var(--fp-radius-full); /* Pill shape per CONTEXT.md */
  transition: border-color var(--fp-transition-fast), box-shadow var(--fp-transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.fp-form-control::placeholder {
  color: var(--fp-text-muted);
  opacity: 1;
}

/* Focus state - border changes to primary + glow */
.fp-form-control:focus {
  outline: none;
  border-color: var(--fp-input-border-focus);
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

/* Disabled state */
.fp-form-control:disabled {
  background-color: var(--fp-gray-100);
  color: var(--fp-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Textarea variant - auto height, no pill shape */
textarea.fp-form-control {
  height: auto;
  min-height: calc(var(--fp-input-height) * 2);
  border-radius: var(--fp-radius-md);
  resize: vertical;
}

/* FORM-02: Form label styles */
.fp-form-label {
  display: block;
  margin-bottom: var(--fp-space-2);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-font-medium);
  color: var(--fp-text-primary);
}

/* Optional field indicator (mark optional instead of required per CONTEXT.md) */
.fp-form-label-optional::after {
  content: " (optional)";
  font-weight: var(--fp-font-normal);
  color: var(--fp-text-muted);
  font-size: var(--fp-text-sm);
}

/* FORM-03: Form group layout (standard stacked) */
.fp-form-group {
  margin-bottom: var(--fp-space-5);
}

/* FORM-03: Form group with floating label */
.fp-form-group-floating {
  position: relative;
  margin-bottom: var(--fp-space-5);
}

.fp-form-group-floating .fp-form-control {
  padding-top: var(--fp-space-5);
  padding-bottom: var(--fp-space-2);
}

.fp-form-group-floating .fp-form-label {
  position: absolute;
  top: 50%;
  left: var(--fp-space-5);
  transform: translateY(-50%);
  margin-bottom: 0;
  font-weight: var(--fp-font-normal);
  color: var(--fp-text-muted);
  pointer-events: none;
  transition: var(--fp-label-transition);
  transform-origin: left top;
}

/* Float label when input has value or is focused */
.fp-form-group-floating .fp-form-control:focus ~ .fp-form-label,
.fp-form-group-floating .fp-form-control:not(:placeholder-shown) ~ .fp-form-label {
  top: var(--fp-space-2);
  transform: translateY(0) scale(0.8);
  color: var(--fp-primary);
  font-weight: var(--fp-font-medium);
}

/* Float label for textarea (different positioning) */
.fp-form-group-floating textarea.fp-form-control ~ .fp-form-label {
  top: var(--fp-space-4);
  transform: translateY(0);
}

.fp-form-group-floating textarea.fp-form-control:focus ~ .fp-form-label,
.fp-form-group-floating textarea.fp-form-control:not(:placeholder-shown) ~ .fp-form-label {
  top: var(--fp-space-1);
  transform: scale(0.8);
}

/* FORM-06: Form help text styles */
.fp-form-text {
  display: block;
  margin-top: var(--fp-space-2);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-muted);
}

/* Inline form layout (label and input side by side) */
.fp-form-inline {
  display: flex;
  align-items: center;
  gap: var(--fp-space-4);
}

.fp-form-inline .fp-form-label {
  margin-bottom: 0;
  white-space: nowrap;
}

.fp-form-inline .fp-form-control {
  flex: 1;
}

/* FORM-04 & FORM-05: Validation states */
/* Note: No green success state - just remove error when valid (per CONTEXT.md) */

/* Invalid state - red border + supports error text below */
.fp-form-control.fp-is-invalid {
  border-color: var(--fp-danger);
}

.fp-form-control.fp-is-invalid:focus {
  border-color: var(--fp-danger);
  box-shadow: 0 0 0 var(--fp-focus-ring-width) rgba(239, 68, 68, 0.25);
}

/* Error message styling (displayed below invalid input) */
.fp-form-error {
  display: block;
  margin-top: var(--fp-space-2);
  font-size: var(--fp-text-sm);
  color: var(--fp-text-danger);
}

/* Hide error when input is valid (no success styling, just hide error) */
.fp-form-control:not(.fp-is-invalid) + .fp-form-error,
.fp-form-control:not(.fp-is-invalid) ~ .fp-form-error {
  display: none;
}

/* Valid state - just remove invalid styling, no green border/icon */
.fp-form-control.fp-is-valid {
  border-color: var(--fp-input-border);
}

.fp-form-control.fp-is-valid:focus {
  border-color: var(--fp-input-border-focus);
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

/* FORM-07: Select input styling */
.fp-form-select {
  display: block;
  width: 100%;
  height: var(--fp-input-height);
  padding: var(--fp-space-3) var(--fp-space-10) var(--fp-space-3) var(--fp-space-5);
  font-size: var(--fp-text-base);
  font-weight: var(--fp-font-normal);
  line-height: var(--fp-leading-base);
  color: var(--fp-text-primary);
  background-color: var(--fp-surface);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--fp-space-4) center;
  background-size: 16px 12px;
  border: 1px solid var(--fp-input-border);
  border-radius: var(--fp-radius-full);
  transition: border-color var(--fp-transition-fast), box-shadow var(--fp-transition-fast);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.fp-form-select:focus {
  outline: none;
  border-color: var(--fp-input-border-focus);
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

.fp-form-select:disabled {
  background-color: var(--fp-gray-100);
  color: var(--fp-text-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

/* Select validation states */
.fp-form-select.fp-is-invalid {
  border-color: var(--fp-danger);
}

.fp-form-select.fp-is-invalid:focus {
  border-color: var(--fp-danger);
  box-shadow: 0 0 0 var(--fp-focus-ring-width) rgba(239, 68, 68, 0.25);
}

/* FORM-08: Checkbox and radio styling */
.fp-form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-3);
  margin-bottom: var(--fp-space-3);
  cursor: pointer;
}

.fp-form-check-input {
  flex-shrink: 0;
  width: 1.25rem;  /* 20px minimum per CONTEXT.md */
  height: 1.25rem;
  margin-top: 0.15rem; /* Align with first line of text */
  background-color: var(--fp-surface);
  border: 2px solid var(--fp-input-border);
  transition: all var(--fp-transition-fast);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Checkbox - rounded corners */
.fp-form-check-input[type="checkbox"] {
  border-radius: var(--fp-radius-sm);
}

/* Radio - circular */
.fp-form-check-input[type="radio"] {
  border-radius: 50%;
}

/* Focus state */
.fp-form-check-input:focus {
  outline: none;
  border-color: var(--fp-primary);
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

/* Checked state - checkbox */
.fp-form-check-input[type="checkbox"]:checked {
  background-color: var(--fp-primary);
  border-color: var(--fp-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Checked state - radio */
.fp-form-check-input[type="radio"]:checked {
  background-color: var(--fp-primary);
  border-color: var(--fp-primary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4' fill='%23fff'/%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

/* Disabled state */
.fp-form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fp-form-check-input:disabled ~ .fp-form-check-label {
  color: var(--fp-text-muted);
  cursor: not-allowed;
}

/* Checkbox/radio label */
.fp-form-check-label {
  font-size: var(--fp-text-base);
  color: var(--fp-text-primary);
  cursor: pointer;
  user-select: none;
}

/* Inline checkboxes/radios */
.fp-form-check-inline {
  display: inline-flex;
  margin-right: var(--fp-space-5);
  margin-bottom: 0;
}

/* Toggle switch (iOS-style) */
.fp-form-switch {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3);
  cursor: pointer;
}

.fp-form-switch-input {
  position: relative;
  width: 2.75rem;  /* 44px */
  height: 1.5rem;  /* 24px */
  background-color: var(--fp-gray-300);
  border: none;
  border-radius: var(--fp-radius-full);
  transition: background-color var(--fp-transition-fast);
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.fp-form-switch-input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;  /* 20px */
  height: 1.25rem;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--fp-transition-fast);
}

.fp-form-switch-input:checked {
  background-color: var(--fp-primary);
}

.fp-form-switch-input:checked::before {
  transform: translateX(1.25rem);
}

.fp-form-switch-input:focus {
  outline: none;
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

.fp-form-switch-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fp-form-switch-label {
  font-size: var(--fp-text-base);
  color: var(--fp-text-primary);
  cursor: pointer;
  user-select: none;
}

/* Range slider (accent-color approach per RESEARCH.md) */
.fp-form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.fp-form-range:focus {
  outline: none;
}

.fp-form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  background: var(--fp-gray-200);
  border-radius: var(--fp-radius-full);
}

.fp-form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: -0.375rem;
  background: var(--fp-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--fp-transition-fast);
}

.fp-form-range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.fp-form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  background: var(--fp-gray-200);
  border-radius: var(--fp-radius-full);
}

.fp-form-range::-moz-range-thumb {
  width: 1.25rem;
  height: 1.25rem;
  background: var(--fp-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--fp-transition-fast);
}

.fp-form-range::-moz-range-thumb:hover {
  transform: scale(1.1);
}

.fp-form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

.fp-form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

.fp-form-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== 3. CARDS ===== */

/* CARD-01: Base card container */
.fp-card {
  background-color: var(--fp-surface);
  border: 1px solid var(--fp-border);
  border-radius: var(--fp-radius-sm); /* 8px */
  box-shadow: var(--fp-shadow-subtle);
  overflow: hidden; /* For images */
}

/* CARD-02: Header section with title + actions layout */
.fp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--fp-space-5) var(--fp-space-6); /* 20px 24px */
}

/* CARD-03: Main content area */
.fp-card-body {
  padding: var(--fp-space-5) var(--fp-space-6); /* 20px 24px */
}

/* Remove top padding when body follows header (avoid double spacing) */
.fp-card-header + .fp-card-body {
  padding-top: 0;
}

/* CARD-04: Footer section */
.fp-card-footer {
  display: flex;
  align-items: center;
  gap: var(--fp-space-3);
  padding: var(--fp-space-5) var(--fp-space-6); /* 20px 24px */
}

/* Remove top padding when footer follows body (avoid double spacing) */
.fp-card-body + .fp-card-footer {
  padding-top: 0;
}

/* CARD-05: Card variants */

/* Clickable card - interactive with hover lift effect */
.fp-card-clickable {
  position: relative; /* For pseudo-element overlay */
  cursor: pointer;
  transition: box-shadow var(--fp-transition-normal), transform var(--fp-transition-normal);
}

.fp-card-clickable:hover {
  box-shadow: var(--fp-shadow-card);
  transform: translateY(-2px);
}

.fp-card-clickable:focus-within {
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

/* Expand link hitbox to cover entire card */
.fp-card-clickable > * a::after,
.fp-card-clickable > a::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* Elevated variant - stronger shadow, no border */
.fp-card-elevated {
  box-shadow: var(--fp-shadow-card);
  border: none;
}

/* Bordered variant - explicit border, no shadow */
.fp-card-bordered {
  box-shadow: none;
  border: 1px solid var(--fp-border);
}

/* ===== 4. ALERTS ===== */
/* ALERT-07: Alerts use icon + color + text for accessibility redundancy */

/* ALERT-01: Base alert container */
.fp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-3);
  padding: var(--fp-space-4) var(--fp-space-5);
  padding-left: var(--fp-space-12); /* Room for icon */
  border-radius: var(--fp-radius-sm);
  font-size: var(--fp-text-base);
  background-repeat: no-repeat;
  background-position: var(--fp-space-4) var(--fp-space-4);
  background-size: 24px 24px;
}

/* ALERT-02: Success variant - emerald with checkmark-circle icon */
.fp-alert-success {
  background-color: var(--fp-emerald-light);
  border: 1px solid var(--fp-emerald);
  color: var(--fp-text-success);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M9 12l2 2 4-4'/%3e%3ccircle cx='12' cy='12' r='10'/%3e%3c/svg%3e");
}

/* ALERT-03: Danger variant - red with exclamation-circle icon */
.fp-alert-danger {
  background-color: var(--fp-red-light);
  border: 1px solid var(--fp-red);
  color: var(--fp-text-danger);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='12' y1='8' x2='12' y2='12'/%3e%3cline x1='12' y1='16' x2='12.01' y2='16'/%3e%3c/svg%3e");
}

/* ALERT-05: Info variant - blue with info-circle icon */
/* Note: ALERT-04 (warning) intentionally skipped per CONTEXT.md - 3 variants only */
.fp-alert-info {
  background-color: var(--fp-blue-light);
  border: 1px solid var(--fp-blue);
  color: var(--fp-text-info);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D4ED8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='12' y1='16' x2='12' y2='12'/%3e%3cline x1='12' y1='8' x2='12.01' y2='8'/%3e%3c/svg%3e");
}

/* Alert content wrapper - takes remaining space */
.fp-alert-content {
  flex: 1;
  min-width: 0; /* Prevents overflow issues */
}

/* ALERT-06: Dismiss button
   Note: Requires aria-label="Dismiss" in HTML for accessibility.
   Actual dismiss behavior requires JavaScript (out of scope for CSS). */
.fp-alert-dismiss {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--fp-transition-fast);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M18 6L6 18M6 6l12 12'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
}

.fp-alert-dismiss:hover {
  opacity: 1;
}

.fp-alert-dismiss:focus {
  outline: none;
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
  border-radius: var(--fp-radius-sm);
}

/* ===== 5. BADGES ===== */

/* BADGE-01: Base badge styles - pill-shaped inline indicator */
.fp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--fp-space-1) var(--fp-space-3);
  font-size: var(--fp-text-sm);
  font-weight: var(--fp-font-semibold);
  line-height: 1;
  border-radius: var(--fp-radius-full);
  white-space: nowrap;
  vertical-align: middle;
}

/* BADGE-02: Filled color variants */

/* Primary badge */
.fp-badge-primary {
  background-color: var(--fp-primary);
  color: var(--fp-text-on-primary);
}

/* Success badge - emerald light background */
.fp-badge-success {
  background-color: var(--fp-emerald-light);
  color: var(--fp-text-success);
}

/* Danger badge - red light background */
.fp-badge-danger {
  background-color: var(--fp-red-light);
  color: var(--fp-text-danger);
}

/* Info badge - blue light background */
.fp-badge-info {
  background-color: var(--fp-blue-light);
  color: var(--fp-text-info);
}

/* Muted badge - neutral gray */
.fp-badge-muted {
  background-color: var(--fp-gray-100);
  color: var(--fp-text-secondary);
}

/* BADGE-02: Outline variants - subtle alternative */

/* Primary outline */
.fp-badge-outline-primary {
  background-color: transparent;
  color: var(--fp-primary);
  border: 1px solid var(--fp-primary);
}

/* Success outline */
.fp-badge-outline-success {
  background-color: transparent;
  color: var(--fp-text-success);
  border: 1px solid var(--fp-emerald);
}

/* Danger outline */
.fp-badge-outline-danger {
  background-color: transparent;
  color: var(--fp-text-danger);
  border: 1px solid var(--fp-red);
}

/* BADGE-03: Size modifiers */

/* Small badge */
.fp-badge-sm {
  padding: 0.125rem var(--fp-space-2);
  font-size: 0.75rem;
}

/* ===== 6. TABLES ===== */

/* TABLE-01: Base table styles - horizontal lines only */
.fp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fp-text-base);
}

/* Table cell base styles */
.fp-table th,
.fp-table td {
  padding: var(--fp-space-3) var(--fp-space-4);
  border-bottom: 1px solid var(--fp-border);
  text-align: left;
  vertical-align: top;
}

/* TABLE-05: Header styling - bold text only, no background color per CONTEXT.md */
.fp-table th {
  font-weight: var(--fp-font-semibold);
  color: var(--fp-text-primary);
}

/* Table data cells */
.fp-table td {
  color: var(--fp-text-secondary);
}

/* Remove bottom border on last row */
.fp-table tbody tr:last-child td {
  border-bottom: none;
}

/* TABLE-02: Striped variant - subtle gray-50 for 50+ readability */
.fp-table-striped tbody tr:nth-child(odd) {
  background-color: var(--fp-gray-50);
}

/* TABLE-03: Hover variant - highlight rows on hover */
.fp-table-hover tbody tr:hover {
  background-color: var(--fp-gray-100);
}

/* TABLE-04: Responsive wrapper - enables horizontal scroll on mobile
   NOTE: .fp-table-responsive wrapper MUST have tabindex="0" and role="region"
   with aria-labelledby pointing to table caption for keyboard accessibility.
   Example: <div class="fp-table-responsive" role="region" tabindex="0" aria-labelledby="caption-id"> */
.fp-table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Focus state for keyboard accessibility */
.fp-table-responsive:focus {
  outline: none;
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}

.fp-table-responsive:focus-visible {
  box-shadow: 0 0 0 var(--fp-focus-ring-width) var(--fp-focus-ring-color);
}
}

/* ==========================================================================
   Utilities Layer
   Utility classes for common patterns. Populated in Phase 40-41.
   ========================================================================== */
@layer utilities {
/* ==========================================================================
   Layout & Spacing Utilities
   FiftyPlus Design System - Phase 40

   Utilities are organized by category:
   1. Display
   2. Flexbox
   3. Gap
   4. Width/Height
   5. Margin (Plan 02)
   6. Padding (Plan 02)
   7. Responsive variants (Plan 02)
   ========================================================================== */

/* ===== 1. DISPLAY ===== */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

/* Bootstrap-compatible aliases */
.d-block { display: block; }
.d-inline-block { display: inline-block; }
.d-inline { display: inline; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-none { display: none; }

/* ===== 2. FLEXBOX ===== */
/* Direction */
.flex-row { flex-direction: row; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Justify Content (main axis) */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* Align Items (cross axis) */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Flex Grow/Shrink */
.flex-grow { flex-grow: 1; }
.flex-grow-0 { flex-grow: 0; }
.flex-shrink { flex-shrink: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }

/* Flex Item Self Alignment */
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* Order */
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }

/* ===== 3. GAP ===== */
.gap-0 { gap: var(--fp-space-0); }
.gap-1 { gap: var(--fp-space-1); }
.gap-2 { gap: var(--fp-space-2); }
.gap-3 { gap: var(--fp-space-3); }
.gap-4 { gap: var(--fp-space-4); }
.gap-5 { gap: var(--fp-space-5); }
.gap-6 { gap: var(--fp-space-6); }
.gap-8 { gap: var(--fp-space-8); }
.gap-10 { gap: var(--fp-space-10); }
.gap-12 { gap: var(--fp-space-12); }
.gap-16 { gap: var(--fp-space-16); }

/* Row/Column specific gaps */
.gap-x-0 { column-gap: var(--fp-space-0); }
.gap-x-1 { column-gap: var(--fp-space-1); }
.gap-x-2 { column-gap: var(--fp-space-2); }
.gap-x-3 { column-gap: var(--fp-space-3); }
.gap-x-4 { column-gap: var(--fp-space-4); }
.gap-x-5 { column-gap: var(--fp-space-5); }
.gap-x-6 { column-gap: var(--fp-space-6); }
.gap-x-8 { column-gap: var(--fp-space-8); }

.gap-y-0 { row-gap: var(--fp-space-0); }
.gap-y-1 { row-gap: var(--fp-space-1); }
.gap-y-2 { row-gap: var(--fp-space-2); }
.gap-y-3 { row-gap: var(--fp-space-3); }
.gap-y-4 { row-gap: var(--fp-space-4); }
.gap-y-5 { row-gap: var(--fp-space-5); }
.gap-y-6 { row-gap: var(--fp-space-6); }
.gap-y-8 { row-gap: var(--fp-space-8); }

/* ===== 4. WIDTH/HEIGHT ===== */
/* Width - basic */
.w-full { width: 100%; }
.w-auto { width: auto; }

/* Width - fractions (note: backslash escapes slash in CSS) */
.w-1\/2 { width: 50%; }
.w-1\/3 { width: 33.333333%; }
.w-2\/3 { width: 66.666667%; }
.w-1\/4 { width: 25%; }
.w-3\/4 { width: 75%; }

/* Max-width constraints */
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-prose { max-width: 65ch; }
.max-w-screen-sm { max-width: 576px; }
.max-w-screen-md { max-width: 768px; }
.max-w-screen-lg { max-width: 992px; }
.max-w-screen-xl { max-width: 1200px; }

/* Height utilities */
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-auto { height: auto; }
.h-1\/2 { height: 50%; }
.h-1\/3 { height: 33.333333%; }

/* Min-height */
.min-h-screen { min-height: 100vh; }
.min-h-full { min-height: 100%; }

/* ===== 5. MARGIN ===== */
/* All sides */
.m-0 { margin: var(--fp-space-0); }
.m-1 { margin: var(--fp-space-1); }
.m-2 { margin: var(--fp-space-2); }
.m-3 { margin: var(--fp-space-3); }
.m-4 { margin: var(--fp-space-4); }
.m-5 { margin: var(--fp-space-5); }
.m-6 { margin: var(--fp-space-6); }
.m-8 { margin: var(--fp-space-8); }
.m-10 { margin: var(--fp-space-10); }
.m-12 { margin: var(--fp-space-12); }
.m-16 { margin: var(--fp-space-16); }

/* Top */
.mt-0 { margin-top: var(--fp-space-0); }
.mt-1 { margin-top: var(--fp-space-1); }
.mt-2 { margin-top: var(--fp-space-2); }
.mt-3 { margin-top: var(--fp-space-3); }
.mt-4 { margin-top: var(--fp-space-4); }
.mt-5 { margin-top: var(--fp-space-5); }
.mt-6 { margin-top: var(--fp-space-6); }
.mt-8 { margin-top: var(--fp-space-8); }
.mt-10 { margin-top: var(--fp-space-10); }
.mt-12 { margin-top: var(--fp-space-12); }
.mt-16 { margin-top: var(--fp-space-16); }

/* Right */
.mr-0 { margin-right: var(--fp-space-0); }
.mr-1 { margin-right: var(--fp-space-1); }
.mr-2 { margin-right: var(--fp-space-2); }
.mr-3 { margin-right: var(--fp-space-3); }
.mr-4 { margin-right: var(--fp-space-4); }
.mr-5 { margin-right: var(--fp-space-5); }
.mr-6 { margin-right: var(--fp-space-6); }
.mr-8 { margin-right: var(--fp-space-8); }

/* Bottom */
.mb-0 { margin-bottom: var(--fp-space-0); }
.mb-1 { margin-bottom: var(--fp-space-1); }
.mb-2 { margin-bottom: var(--fp-space-2); }
.mb-3 { margin-bottom: var(--fp-space-3); }
.mb-4 { margin-bottom: var(--fp-space-4); }
.mb-5 { margin-bottom: var(--fp-space-5); }
.mb-6 { margin-bottom: var(--fp-space-6); }
.mb-8 { margin-bottom: var(--fp-space-8); }
.mb-10 { margin-bottom: var(--fp-space-10); }
.mb-12 { margin-bottom: var(--fp-space-12); }
.mb-16 { margin-bottom: var(--fp-space-16); }

/* Left */
.ml-0 { margin-left: var(--fp-space-0); }
.ml-1 { margin-left: var(--fp-space-1); }
.ml-2 { margin-left: var(--fp-space-2); }
.ml-3 { margin-left: var(--fp-space-3); }
.ml-4 { margin-left: var(--fp-space-4); }
.ml-5 { margin-left: var(--fp-space-5); }
.ml-6 { margin-left: var(--fp-space-6); }
.ml-8 { margin-left: var(--fp-space-8); }

/* Horizontal (X axis) */
.mx-0 { margin-left: var(--fp-space-0); margin-right: var(--fp-space-0); }
.mx-1 { margin-left: var(--fp-space-1); margin-right: var(--fp-space-1); }
.mx-2 { margin-left: var(--fp-space-2); margin-right: var(--fp-space-2); }
.mx-3 { margin-left: var(--fp-space-3); margin-right: var(--fp-space-3); }
.mx-4 { margin-left: var(--fp-space-4); margin-right: var(--fp-space-4); }
.mx-5 { margin-left: var(--fp-space-5); margin-right: var(--fp-space-5); }
.mx-6 { margin-left: var(--fp-space-6); margin-right: var(--fp-space-6); }
.mx-8 { margin-left: var(--fp-space-8); margin-right: var(--fp-space-8); }

/* Vertical (Y axis) */
.my-0 { margin-top: var(--fp-space-0); margin-bottom: var(--fp-space-0); }
.my-1 { margin-top: var(--fp-space-1); margin-bottom: var(--fp-space-1); }
.my-2 { margin-top: var(--fp-space-2); margin-bottom: var(--fp-space-2); }
.my-3 { margin-top: var(--fp-space-3); margin-bottom: var(--fp-space-3); }
.my-4 { margin-top: var(--fp-space-4); margin-bottom: var(--fp-space-4); }
.my-5 { margin-top: var(--fp-space-5); margin-bottom: var(--fp-space-5); }
.my-6 { margin-top: var(--fp-space-6); margin-bottom: var(--fp-space-6); }
.my-8 { margin-top: var(--fp-space-8); margin-bottom: var(--fp-space-8); }

/* Auto margins (centering) */
.mx-auto { margin-left: auto; margin-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }

/* ===== 6. PADDING ===== */
/* All sides */
.p-0 { padding: var(--fp-space-0); }
.p-1 { padding: var(--fp-space-1); }
.p-2 { padding: var(--fp-space-2); }
.p-3 { padding: var(--fp-space-3); }
.p-4 { padding: var(--fp-space-4); }
.p-5 { padding: var(--fp-space-5); }
.p-6 { padding: var(--fp-space-6); }
.p-8 { padding: var(--fp-space-8); }
.p-10 { padding: var(--fp-space-10); }
.p-12 { padding: var(--fp-space-12); }
.p-16 { padding: var(--fp-space-16); }

/* Top */
.pt-0 { padding-top: var(--fp-space-0); }
.pt-1 { padding-top: var(--fp-space-1); }
.pt-2 { padding-top: var(--fp-space-2); }
.pt-3 { padding-top: var(--fp-space-3); }
.pt-4 { padding-top: var(--fp-space-4); }
.pt-5 { padding-top: var(--fp-space-5); }
.pt-6 { padding-top: var(--fp-space-6); }
.pt-8 { padding-top: var(--fp-space-8); }

/* Right */
.pr-0 { padding-right: var(--fp-space-0); }
.pr-1 { padding-right: var(--fp-space-1); }
.pr-2 { padding-right: var(--fp-space-2); }
.pr-3 { padding-right: var(--fp-space-3); }
.pr-4 { padding-right: var(--fp-space-4); }
.pr-5 { padding-right: var(--fp-space-5); }
.pr-6 { padding-right: var(--fp-space-6); }
.pr-8 { padding-right: var(--fp-space-8); }

/* Bottom */
.pb-0 { padding-bottom: var(--fp-space-0); }
.pb-1 { padding-bottom: var(--fp-space-1); }
.pb-2 { padding-bottom: var(--fp-space-2); }
.pb-3 { padding-bottom: var(--fp-space-3); }
.pb-4 { padding-bottom: var(--fp-space-4); }
.pb-5 { padding-bottom: var(--fp-space-5); }
.pb-6 { padding-bottom: var(--fp-space-6); }
.pb-8 { padding-bottom: var(--fp-space-8); }

/* Left */
.pl-0 { padding-left: var(--fp-space-0); }
.pl-1 { padding-left: var(--fp-space-1); }
.pl-2 { padding-left: var(--fp-space-2); }
.pl-3 { padding-left: var(--fp-space-3); }
.pl-4 { padding-left: var(--fp-space-4); }
.pl-5 { padding-left: var(--fp-space-5); }
.pl-6 { padding-left: var(--fp-space-6); }
.pl-8 { padding-left: var(--fp-space-8); }

/* Horizontal (X axis) */
.px-0 { padding-left: var(--fp-space-0); padding-right: var(--fp-space-0); }
.px-1 { padding-left: var(--fp-space-1); padding-right: var(--fp-space-1); }
.px-2 { padding-left: var(--fp-space-2); padding-right: var(--fp-space-2); }
.px-3 { padding-left: var(--fp-space-3); padding-right: var(--fp-space-3); }
.px-4 { padding-left: var(--fp-space-4); padding-right: var(--fp-space-4); }
.px-5 { padding-left: var(--fp-space-5); padding-right: var(--fp-space-5); }
.px-6 { padding-left: var(--fp-space-6); padding-right: var(--fp-space-6); }
.px-8 { padding-left: var(--fp-space-8); padding-right: var(--fp-space-8); }

/* Vertical (Y axis) */
.py-0 { padding-top: var(--fp-space-0); padding-bottom: var(--fp-space-0); }
.py-1 { padding-top: var(--fp-space-1); padding-bottom: var(--fp-space-1); }
.py-2 { padding-top: var(--fp-space-2); padding-bottom: var(--fp-space-2); }
.py-3 { padding-top: var(--fp-space-3); padding-bottom: var(--fp-space-3); }
.py-4 { padding-top: var(--fp-space-4); padding-bottom: var(--fp-space-4); }
.py-5 { padding-top: var(--fp-space-5); padding-bottom: var(--fp-space-5); }
.py-6 { padding-top: var(--fp-space-6); padding-bottom: var(--fp-space-6); }
.py-8 { padding-top: var(--fp-space-8); padding-bottom: var(--fp-space-8); }

/* ===== 7. RESPONSIVE VARIANTS ===== */
/* Mobile-first: base styles for all sizes, prefixed styles at breakpoint and up.
   Breakpoints match Bootstrap: sm=576px, md=768px, lg=992px, xl=1200px
   Colons escaped with backslash in CSS: .md\:flex */

/* --- sm: Small (576px and up) --- */
@media (min-width: 576px) {
  /* Display */
  .sm\:block { display: block; }
  .sm\:inline-block { display: inline-block; }
  .sm\:flex { display: flex; }
  .sm\:inline-flex { display: inline-flex; }
  .sm\:hidden { display: none; }

  /* Flexbox direction */
  .sm\:flex-row { flex-direction: row; }
  .sm\:flex-col { flex-direction: column; }

  /* Flexbox justify */
  .sm\:justify-start { justify-content: flex-start; }
  .sm\:justify-center { justify-content: center; }
  .sm\:justify-between { justify-content: space-between; }
  .sm\:justify-end { justify-content: flex-end; }

  /* Flexbox align */
  .sm\:items-start { align-items: flex-start; }
  .sm\:items-center { align-items: center; }
  .sm\:items-end { align-items: flex-end; }

  /* Gap */
  .sm\:gap-2 { gap: var(--fp-space-2); }
  .sm\:gap-4 { gap: var(--fp-space-4); }
  .sm\:gap-6 { gap: var(--fp-space-6); }

  /* Width */
  .sm\:w-full { width: 100%; }
  .sm\:w-auto { width: auto; }
  .sm\:w-1\/2 { width: 50%; }
  .sm\:w-1\/3 { width: 33.333333%; }

  /* Padding */
  .sm\:p-4 { padding: var(--fp-space-4); }
  .sm\:p-6 { padding: var(--fp-space-6); }
  .sm\:px-4 { padding-left: var(--fp-space-4); padding-right: var(--fp-space-4); }
  .sm\:py-4 { padding-top: var(--fp-space-4); padding-bottom: var(--fp-space-4); }

  /* Margin */
  .sm\:m-4 { margin: var(--fp-space-4); }
  .sm\:mx-auto { margin-left: auto; margin-right: auto; }
  .sm\:mt-4 { margin-top: var(--fp-space-4); }
  .sm\:mb-4 { margin-bottom: var(--fp-space-4); }
}

/* --- md: Medium (768px and up) --- */
@media (min-width: 768px) {
  /* Display */
  .md\:block { display: block; }
  .md\:inline-block { display: inline-block; }
  .md\:flex { display: flex; }
  .md\:inline-flex { display: inline-flex; }
  .md\:hidden { display: none; }

  /* Flexbox direction */
  .md\:flex-row { flex-direction: row; }
  .md\:flex-col { flex-direction: column; }

  /* Flexbox justify */
  .md\:justify-start { justify-content: flex-start; }
  .md\:justify-center { justify-content: center; }
  .md\:justify-between { justify-content: space-between; }
  .md\:justify-end { justify-content: flex-end; }

  /* Flexbox align */
  .md\:items-start { align-items: flex-start; }
  .md\:items-center { align-items: center; }
  .md\:items-end { align-items: flex-end; }

  /* Gap */
  .md\:gap-2 { gap: var(--fp-space-2); }
  .md\:gap-4 { gap: var(--fp-space-4); }
  .md\:gap-6 { gap: var(--fp-space-6); }
  .md\:gap-8 { gap: var(--fp-space-8); }

  /* Width */
  .md\:w-full { width: 100%; }
  .md\:w-auto { width: auto; }
  .md\:w-1\/2 { width: 50%; }
  .md\:w-1\/3 { width: 33.333333%; }
  .md\:w-2\/3 { width: 66.666667%; }
  .md\:w-1\/4 { width: 25%; }

  /* Padding */
  .md\:p-4 { padding: var(--fp-space-4); }
  .md\:p-6 { padding: var(--fp-space-6); }
  .md\:p-8 { padding: var(--fp-space-8); }
  .md\:px-4 { padding-left: var(--fp-space-4); padding-right: var(--fp-space-4); }
  .md\:px-6 { padding-left: var(--fp-space-6); padding-right: var(--fp-space-6); }
  .md\:py-4 { padding-top: var(--fp-space-4); padding-bottom: var(--fp-space-4); }
  .md\:py-6 { padding-top: var(--fp-space-6); padding-bottom: var(--fp-space-6); }

  /* Margin */
  .md\:m-4 { margin: var(--fp-space-4); }
  .md\:m-6 { margin: var(--fp-space-6); }
  .md\:mx-auto { margin-left: auto; margin-right: auto; }
  .md\:mt-4 { margin-top: var(--fp-space-4); }
  .md\:mt-6 { margin-top: var(--fp-space-6); }
  .md\:mb-4 { margin-bottom: var(--fp-space-4); }
  .md\:mb-6 { margin-bottom: var(--fp-space-6); }
}

/* --- lg: Large (992px and up) --- */
@media (min-width: 992px) {
  /* Display */
  .lg\:block { display: block; }
  .lg\:inline-block { display: inline-block; }
  .lg\:flex { display: flex; }
  .lg\:inline-flex { display: inline-flex; }
  .lg\:hidden { display: none; }

  /* Flexbox direction */
  .lg\:flex-row { flex-direction: row; }
  .lg\:flex-col { flex-direction: column; }

  /* Flexbox justify */
  .lg\:justify-start { justify-content: flex-start; }
  .lg\:justify-center { justify-content: center; }
  .lg\:justify-between { justify-content: space-between; }
  .lg\:justify-end { justify-content: flex-end; }

  /* Flexbox align */
  .lg\:items-start { align-items: flex-start; }
  .lg\:items-center { align-items: center; }
  .lg\:items-end { align-items: flex-end; }

  /* Gap */
  .lg\:gap-4 { gap: var(--fp-space-4); }
  .lg\:gap-6 { gap: var(--fp-space-6); }
  .lg\:gap-8 { gap: var(--fp-space-8); }

  /* Width */
  .lg\:w-full { width: 100%; }
  .lg\:w-auto { width: auto; }
  .lg\:w-1\/2 { width: 50%; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:w-2\/3 { width: 66.666667%; }
  .lg\:w-1\/4 { width: 25%; }

  /* Padding */
  .lg\:p-6 { padding: var(--fp-space-6); }
  .lg\:p-8 { padding: var(--fp-space-8); }
  .lg\:p-10 { padding: var(--fp-space-10); }
  .lg\:px-6 { padding-left: var(--fp-space-6); padding-right: var(--fp-space-6); }
  .lg\:px-8 { padding-left: var(--fp-space-8); padding-right: var(--fp-space-8); }
  .lg\:py-6 { padding-top: var(--fp-space-6); padding-bottom: var(--fp-space-6); }
  .lg\:py-8 { padding-top: var(--fp-space-8); padding-bottom: var(--fp-space-8); }

  /* Margin */
  .lg\:m-6 { margin: var(--fp-space-6); }
  .lg\:m-8 { margin: var(--fp-space-8); }
  .lg\:mx-auto { margin-left: auto; margin-right: auto; }
  .lg\:mt-6 { margin-top: var(--fp-space-6); }
  .lg\:mt-8 { margin-top: var(--fp-space-8); }
  .lg\:mb-6 { margin-bottom: var(--fp-space-6); }
  .lg\:mb-8 { margin-bottom: var(--fp-space-8); }
}

/* --- xl: Extra Large (1200px and up) --- */
@media (min-width: 1200px) {
  /* Display */
  .xl\:block { display: block; }
  .xl\:flex { display: flex; }
  .xl\:hidden { display: none; }

  /* Flexbox direction */
  .xl\:flex-row { flex-direction: row; }
  .xl\:flex-col { flex-direction: column; }

  /* Gap */
  .xl\:gap-6 { gap: var(--fp-space-6); }
  .xl\:gap-8 { gap: var(--fp-space-8); }

  /* Width */
  .xl\:w-full { width: 100%; }
  .xl\:w-1\/2 { width: 50%; }
  .xl\:w-1\/3 { width: 33.333333%; }
  .xl\:w-1\/4 { width: 25%; }

  /* Padding */
  .xl\:p-8 { padding: var(--fp-space-8); }
  .xl\:p-10 { padding: var(--fp-space-10); }
  .xl\:px-8 { padding-left: var(--fp-space-8); padding-right: var(--fp-space-8); }
  .xl\:py-8 { padding-top: var(--fp-space-8); padding-bottom: var(--fp-space-8); }

  /* Margin */
  .xl\:m-8 { margin: var(--fp-space-8); }
  .xl\:mx-auto { margin-left: auto; margin-right: auto; }
  .xl\:mt-8 { margin-top: var(--fp-space-8); }
  .xl\:mb-8 { margin-bottom: var(--fp-space-8); }
}

/* ===== 8. TYPOGRAPHY ===== */
/* TYPE-01: Text size utilities with paired line heights */
.text-sm { font-size: var(--fp-text-sm); line-height: var(--fp-leading-sm); }
.text-base { font-size: var(--fp-text-base); line-height: var(--fp-leading-base); }
.text-lg { font-size: var(--fp-text-lg); line-height: var(--fp-leading-lg); }
.text-xl { font-size: var(--fp-text-xl); line-height: var(--fp-leading-xl); }
.text-2xl { font-size: var(--fp-text-2xl); line-height: var(--fp-leading-2xl); }
.text-3xl { font-size: var(--fp-text-3xl); line-height: var(--fp-leading-3xl); }

/* TYPE-02: Font weight utilities */
.font-normal { font-weight: var(--fp-font-normal); }
.font-medium { font-weight: var(--fp-font-medium); }
.font-semibold { font-weight: var(--fp-font-semibold); }
.font-bold { font-weight: var(--fp-font-bold); }

/* TYPE-03: Line height utilities (standalone overrides) */
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.65; }

/* TYPE-04: Text alignment utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* TYPE-05: Text transform utilities */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.normal-case { text-transform: none; }

/* TYPE-06: Text wrap utilities */
.whitespace-nowrap { white-space: nowrap; }
.whitespace-normal { white-space: normal; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== 9. COLORS ===== */
/* COLOR-01: Text color utilities (reference text tokens for WCAG compliance) */
.text-primary { color: var(--fp-text-primary); }
.text-secondary { color: var(--fp-text-secondary); }
.text-muted { color: var(--fp-text-muted); }
.text-danger { color: var(--fp-text-danger); }
.text-success { color: var(--fp-text-success); }
.text-warning { color: var(--fp-text-warning); }
.text-info { color: var(--fp-text-info); }
.text-on-primary { color: var(--fp-text-on-primary); }

/* COLOR-02: Background color utilities (reference semantic tokens for theming) */
.bg-white { background-color: #FFFFFF; }
.bg-surface { background-color: var(--fp-surface); }
.bg-background { background-color: var(--fp-background); }
.bg-primary { background-color: var(--fp-primary); }
.bg-secondary { background-color: var(--fp-secondary); }
.bg-danger { background-color: var(--fp-danger); }
.bg-success { background-color: var(--fp-success); }
.bg-warning { background-color: var(--fp-warning); }
.bg-info { background-color: var(--fp-info); }

/* COLOR-03: Border color utilities (work with existing border utilities) */
.border-gray-200 { border-color: var(--fp-gray-200); }
.border-gray-300 { border-color: var(--fp-gray-300); }
.border-primary { border-color: var(--fp-primary); }
.border-danger { border-color: var(--fp-danger); }
.border-success { border-color: var(--fp-success); }

/* ===== 10. BORDERS ===== */
/* Base border utilities (enables border color utilities from COLOR-03) */

/* Default border - applies 1px solid using the design system border color */
.border { border: 1px solid var(--fp-border); }
.border-0 { border: 0; }
.border-2 { border-width: 2px; }
.border-4 { border-width: 4px; }

/* Directional borders - applies border to single side */
.border-t { border-top: 1px solid var(--fp-border); }
.border-r { border-right: 1px solid var(--fp-border); }
.border-b { border-bottom: 1px solid var(--fp-border); }
.border-l { border-left: 1px solid var(--fp-border); }

/* Directional border removal */
.border-t-0 { border-top: 0; }
.border-r-0 { border-right: 0; }
.border-b-0 { border-bottom: 0; }
.border-l-0 { border-left: 0; }

/* Border style utilities */
.border-solid { border-style: solid; }
.border-dashed { border-style: dashed; }
.border-dotted { border-style: dotted; }
.border-none { border-style: none; }

/* Border radius utilities (commonly used with borders) */
.rounded-none { border-radius: 0; }
.rounded-sm { border-radius: var(--fp-radius-sm); }
.rounded-md { border-radius: var(--fp-radius-md); }
.rounded-lg { border-radius: var(--fp-radius-lg); }
.rounded-full { border-radius: var(--fp-radius-full); }

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */

/* A11Y-02: Touch target utility - minimum 48px hit area per WCAG 2.5.5
   Use on custom interactive elements that don't naturally meet 48px.
   Note: .fp-btn already meets this (52px default height). */
.fp-touch-target {
  min-width: 48px;
  min-height: 48px;
}

/* A11Y-04: Accessible error message with icon for redundancy
   Usage: <p class="fp-error-message" role="alert">Error text here</p>
   Provides: icon + color + text (triple redundancy per accessibility best practice) */
.fp-error-message {
  display: flex;
  align-items: flex-start;
  gap: var(--fp-space-2);
  color: var(--fp-text-danger);
  font-size: var(--fp-text-sm);
  margin-top: var(--fp-space-2);
}

.fp-error-message::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px; /* Align with text baseline */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B91C1C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='12' y1='8' x2='12' y2='12'/%3e%3cline x1='12' y1='16' x2='12.01' y2='16'/%3e%3c/svg%3e");
  background-size: contain;
  background-repeat: no-repeat;
}

/* A11Y-05: Screen reader only utility
   Visually hidden but accessible to assistive technologies */
.fp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
}