@layer utilities {
      .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    .line-clamp-3 {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  :root {
    --base-font-size: 16px;
    --body-line-height: 1.5;
    --body-letter-spacing: normal;
    --focus-ring-color: #0ea5e9;
    --app-font-stack: 'Space Grotesk', 'ui-sans-serif', 'system-ui';
  }

  html {
    font-size: var(--base-font-size);
  }

  body {
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    -webkit-text-size-adjust: 100%;
  }

  .font-sans {
    font-family: var(--app-font-stack) !important;
  }

  @font-face {
    font-family: 'OpenDyslexic';
    src:
      url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/fonts/OpenDyslexic-Regular.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/fonts/OpenDyslexic-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'OpenDyslexic';
    src:
      url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/fonts/OpenDyslexic-Bold.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic@master/fonts/OpenDyslexic-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  .high-contrast {
    filter: contrast(1.1) saturate(1.05);
  }

  .focus-ring :focus {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
  }

  .switch-highlight {
    outline: 3px solid #f59e0b;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
  }

  .large-targets button,
  .large-targets a,
  .large-targets input,
  .large-targets textarea,
  .large-targets select {
    min-height: 44px;
    min-width: 44px;
  }

  .reduce-motion *,
  .reduce-motion *::before,
  .reduce-motion *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reduce-transparency .a11y-overlay {
    backdrop-filter: none !important;
    background-color: rgba(15, 23, 42, 0.85) !important;
  }

    @keyframes scale-in {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes reaction-pop {
      0% {
        transform: scale(0.8);
        opacity: 0;
      }
      50% {
        transform: scale(1.1);
      }
      100% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes heart-burst {
      0% {
        transform: scale(0.3) translateY(0);
        opacity: 0;
      }
      50% {
        transform: scale(1.5) translateY(-10px);
        opacity: 1;
      }
      100% {
        transform: scale(1) translateY(-20px);
        opacity: 0;
      }
    }

    .heart-animation {
      animation: heart-burst 0.6s ease-out;
      pointer-events: none;
    }

    @keyframes slide-in-right {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    .animate-slide-in-right {
      animation: slide-in-right 0.3s ease-out;
    }

    /* iOS Safari viewport fix */
    html, body {
      height: 100%;
      height: 100dvh;
      overflow: hidden;
      position: fixed;
      width: 100%;
      -webkit-overflow-scrolling: touch;
    }

    #root {
      height: 100%;
      height: 100dvh;
      overflow: hidden;
    }

    /* Safe height utility */
    .h-safe-screen {
      height: 100vh;
      height: 100dvh;
    }

    .min-h-safe-screen {
      min-height: 100vh;
      min-height: 100dvh;
    }

    /* Safe area inset for notched devices */
    .pb-safe {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }