maternal-app/maternal-web/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  /* Purple/Pink Gradient Theme (Default) */
  --color-1: #8b52ff;
  --color-2: #d194e6;
  --color-3: #f2a6f2;
  --color-4: #ffb3e4;
  --color-5: #ff7094;

  /* Warm Peach Theme (High Contrast) */
  --warm-1: #FFB6C1;
  --warm-2: #FFDAB9;
  --warm-3: #FFE4E1;
  --warm-4: #FFD4CC;
  --warm-5: #FF8B7D;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(
      to bottom,
      transparent,
      rgb(var(--background-end-rgb))
    )
    rgb(var(--background-start-rgb));
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* ============================================
   Accessibility Styles
   ============================================ */

/* Focus indicators - visible outline for keyboard navigation */
*:focus {
  outline: 2px solid #FF8B7D; /* Coral from design system */
  outline-offset: 2px;
}

/* Focus visible (keyboard only, not mouse clicks) */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid #FF8B7D;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(255, 139, 125, 0.2);
}

/* High contrast focus for better visibility */
@media (prefers-contrast: high) {
  *:focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 3px;
  }
}

/* Skip navigation link - hidden until focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 9999;
  font-weight: bold;
  border-radius: 0 0 4px 0;
  transition: top 0.2s ease-in-out;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #FFD4CC; /* Rose from design system */
  outline-offset: 2px;
}

/* Screen reader only content - visually hidden but accessible to screen readers */
.sr-only,
.sr-only-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Make screen-reader-only content visible when focused */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  body {
    background: white;
    color: black;
  }

  a {
    text-decoration: underline;
  }

  button {
    border: 2px solid currentColor;
  }
}

/* Touch target minimum size helper */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Focus within for containers with focusable children */
.focus-within:focus-within {
  outline: 2px solid #FF8B7D;
  outline-offset: 2px;
}

/* ============================================
   MUI Grid Custom Styling
   ============================================ */

/* MUI Grid minimum width and centering */
.mui-17fpwt7-MuiGrid-root {
  min-width: 20% !important;
}

/* Center MUI Grid containers and items */
.MuiGrid-container {
  justify-content: center !important;
}

.MuiGrid-item {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}