/* MomSpeak Design System - CSS Variables */
/* Based on withnanny design system */

:root {
  /* Static Colors */
  --ms-static-white: #ffffff;
  --ms-static-black: #000000;

  /* Gray Scale */
  --ms-gray-50: #f5f7f8;
  --ms-gray-100: #eaebef;
  --ms-gray-200: #dcdee3;
  --ms-gray-300: #c2c6ce;
  --ms-gray-400: #a4a9b6;
  --ms-gray-500: #8e93a3;
  --ms-gray-600: #777b8c;
  --ms-gray-700: #616273;
  --ms-gray-800: #4c4c59;
  --ms-gray-900: #373840;
  --ms-gray-950: #16171a;

  /* Primary Orange */
  --ms-orange-50: #fff7ed;
  --ms-orange-100: #ffedd4;
  --ms-orange-200: #ffd8a8;
  --ms-orange-300: #ffbb70;
  --ms-orange-400: #ff9237;
  --ms-orange-500: #ff7f24;
  --ms-orange-600: #f05706;
  --ms-orange-700: #c74007;
  --ms-orange-800: #9e330e;
  --ms-orange-900: #7f2d0f;
  --ms-orange-950: #451305;

  /* Status Colors */
  --ms-red-500: #ff4242;
  --ms-red-600: #ed1515;
  --ms-green-500: #15c14e;
  --ms-green-600: #0cad41;
  --ms-blue-500: #289bff;
  --ms-blue-600: #0a79ff;

  /* Light Theme Semantic Colors */
  --ms-bg-normal: var(--ms-static-white);
  --ms-bg-neutral: var(--ms-gray-50);
  --ms-bg-alternative: var(--ms-gray-100);

  --ms-label-strong: var(--ms-static-black);
  --ms-label-normal: var(--ms-gray-950);
  --ms-label-alternative: var(--ms-gray-600);
  --ms-label-disable: rgba(22, 23, 26, 0.3);

  --ms-border-normal: var(--ms-gray-100);
  --ms-border-focused: var(--ms-gray-900);

  --ms-primary-normal: var(--ms-orange-500);
  --ms-primary-disable: var(--ms-orange-200);
  --ms-primary-bg: var(--ms-orange-100);

  --ms-status-negative: var(--ms-red-600);
  --ms-status-caution: var(--ms-orange-400);
  --ms-status-positive: var(--ms-green-600);

  /* Spacing */
  --ms-spacing-xs: 0.25rem;
  --ms-spacing-sm: 0.5rem;
  --ms-spacing-md: 1rem;
  --ms-spacing-lg: 1.5rem;
  --ms-spacing-xl: 2rem;

  /* Border Radius */
  --ms-radius-sm: 0.5rem;
  --ms-radius-md: 1rem;
  --ms-radius-lg: 1.5rem;
  --ms-radius-full: 9999px;

  /* Shadows */
  --ms-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ms-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --ms-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Safe Area (for iOS) */
  --ms-safe-area-top: env(safe-area-inset-top);
  --ms-safe-area-bottom: env(safe-area-inset-bottom);
  --ms-safe-area-left: env(safe-area-inset-left);
  --ms-safe-area-right: env(safe-area-inset-right);

  /* App Container */
  --ms-max-width: 480px;
  --ms-nav-height: 56px;
  --ms-bottom-nav-height: 64px;
}

/* Dark Theme - Disabled for MomSpeak (Light mode only) */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --ms-bg-normal: var(--ms-static-black);
    --ms-bg-neutral: var(--ms-gray-950);
    --ms-bg-alternative: var(--ms-gray-900);

    --ms-label-strong: var(--ms-static-white);
    --ms-label-normal: var(--ms-gray-200);
    --ms-label-alternative: var(--ms-gray-500);
    --ms-label-disable: rgba(142, 147, 163, 0.3);

    --ms-border-normal: var(--ms-gray-900);
    --ms-border-focused: var(--ms-gray-100);

    --ms-primary-normal: var(--ms-orange-400);
    --ms-primary-disable: rgba(255, 146, 55, 0.16);
    --ms-primary-bg: var(--ms-orange-800);
  }
}
*/