/**
 * Design Tokens — First Aid Fast
 * Generated from UX Design Specification v1.0
 * Source: _bmad-output/planning-artifacts/ux-design-specification.md
 *
 * DO NOT edit token values manually.
 * Update the UX spec and regenerate via bmad-frontend-design.
 */

/* ==========================================================================
   ROOT — LIGHT MODE TOKENS
   ========================================================================== */

:root {

  /* --------------------------------------------------------------------------
     COLOUR — PRIMARY (Health & Safety Green)
     -------------------------------------------------------------------------- */
  --color-primary-50:  #E5F9F2;
  --color-primary-100: #B3EDD9;
  --color-primary-500: #00A86B;
  --color-primary-600: #008E5A;
  --color-primary-700: #007349;
  --color-primary-900: #003D26; /* Deep emerald — hero/CTA gradient dark stop */

  /* --------------------------------------------------------------------------
     COLOUR — ACCENT (First Aid Red)
     -------------------------------------------------------------------------- */
  --color-accent-50:   #FDECEA;
  --color-accent-100:  #F7C0BC;
  --color-accent-500:  #C0392B;
  --color-accent-600:  #A1311F;
  --color-accent-700:  #821E17;

  /* --------------------------------------------------------------------------
     COLOUR — NEUTRALS
     -------------------------------------------------------------------------- */
  --color-neutral-50:  #FAFAFA;
  --color-neutral-100: #F5F5F5;
  --color-neutral-300: #C4C4C4;
  --color-neutral-500: #6B6B6B;
  --color-neutral-700: #3D3D3D;
  --color-neutral-900: #1A1A1A;
  --color-neutral-950: #0A0A0A; /* Near-black — dark mode footer background */
  --color-white:       #FFFFFF;

  /* --------------------------------------------------------------------------
     COLOUR — SEMANTIC
     -------------------------------------------------------------------------- */
  --color-success:     #00A86B;
  --color-error:       #C0392B;
  --color-warning:     #D97706;
  --color-info:        #1D6E9E;

  /* Form banners (EPIC-3-STORY-003) */
  --color-banner-success-bg: #e8f5f0;
  --color-banner-success-text: #1a3d30;
  --color-banner-error-bg: #fdecea;
  --color-banner-error-text: #5a1010;

  /* --------------------------------------------------------------------------
     COLOUR — WHATSAPP (brand colour — do not change)
     -------------------------------------------------------------------------- */
  --color-whatsapp:       #25D366;
  --color-whatsapp-hover: #128C7E;

  /* --------------------------------------------------------------------------
     COLOUR — SURFACE / BACKGROUND
     (Aliased from neutrals for semantic usage)
     -------------------------------------------------------------------------- */
  --color-background:        var(--color-white);
  --color-surface:           var(--color-neutral-50);
  --color-surface-raised:    var(--color-white);
  --color-border:            var(--color-neutral-300);
  --color-text-primary:      var(--color-neutral-900);
  --color-text-secondary:    var(--color-neutral-700);
  --color-text-muted:        var(--color-neutral-500);
  --color-text-inverse:      var(--color-white);

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — FONT FAMILIES
     -------------------------------------------------------------------------- */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — SCALE (px values)
     -------------------------------------------------------------------------- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;
  --text-5xl:  48px;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — LINE HEIGHTS
     -------------------------------------------------------------------------- */
  --leading-xs:   16px;
  --leading-sm:   20px;
  --leading-base: 24px;
  --leading-lg:   28px;
  --leading-xl:   28px;
  --leading-2xl:  32px;
  --leading-3xl:  38px;
  --leading-4xl:  44px;
  --leading-5xl:  56px;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — FONT WEIGHTS
     -------------------------------------------------------------------------- */
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — LETTER SPACING
     -------------------------------------------------------------------------- */
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-widest:   0.1em;

  /* --------------------------------------------------------------------------
     SPACING — 8px Grid System
     -------------------------------------------------------------------------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* --------------------------------------------------------------------------
     BORDER RADII
     -------------------------------------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --------------------------------------------------------------------------
     SHADOWS
     -------------------------------------------------------------------------- */
  --shadow-sm:        0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:        0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:        0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
  --shadow-xl:        0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
  --shadow-whatsapp:  0 4px 12px rgba(37,211,102,0.4);
  --shadow-focus:     0 0 0 3px rgba(29,158,117,0.3);

  /* --------------------------------------------------------------------------
     ANIMATION TIMING
     -------------------------------------------------------------------------- */
  --transition-fast:   150ms ease-in-out;
  --transition-base:   250ms ease-in-out;
  --transition-slow:   400ms ease-in-out;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-max:   1280px;
  --container-pad-x: var(--space-4);  /* 16px — mobile */
  --nav-height:      110px;
  --nav-height-mob:  90px;

  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------------------------- */
  --z-nav:       500;
  --z-whatsapp:  200;
  --z-menu:      550;
  --z-tooltip:   600;
  --z-modal:     700;
}

/* Wider container padding on larger screens */
@media (min-width: 768px) {
  :root {
    --container-pad-x: var(--space-8);   /* 32px — tablet */
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad-x: var(--space-12);  /* 48px — desktop */
  }
}


/* ==========================================================================
   DARK MODE TOKEN OVERRIDES
   UX Spec §Design Tokens › Colour Palette › Dark mode overrides
   Applied via [data-theme="dark"] on <html> element
   ========================================================================== */

[data-theme="dark"] {

  /* Primary */
  --color-primary-50:  #00200F;
  --color-primary-100: #003D26;
  --color-primary-500: #1AC57E;
  --color-primary-600: #00A86B;
  --color-primary-700: #008E5A;

  /* Accent */
  --color-accent-50:   #3D0A07;
  --color-accent-100:  #5C1510;
  --color-accent-500:  #E04B3A;
  --color-accent-600:  #C0392B;
  --color-accent-700:  #A1311F;

  /* Neutrals — inverted */
  --color-neutral-50:  #252525;
  --color-neutral-100: #1E1E1E;
  --color-neutral-300: #404040;
  --color-neutral-500: #8A8A8A;
  --color-neutral-700: #C8C8C8;
  --color-neutral-900: #F0F0F0;
  --color-white:       #1C1F1E;

  /* Semantic */
  --color-success:   #1AC57E;
  --color-error:     #E04B3A;
  --color-warning:   #FBBF24;
  --color-info:      #38BDF8;

  /* Surface aliases — re-derive from overridden neutrals */
  --color-background:     #1C1F1E;
  --color-surface:        #252928;
  --color-surface-raised: #2E3330;
  --color-border:         #404040;
  --color-text-primary:   #F0F0F0;
  --color-text-secondary: #C8C8C8;
  --color-text-muted:     #8A8A8A;
  --color-text-inverse:   #121212;

  /* Shadows — softer in dark mode */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.25);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.4), 0 4px 6px rgba(0,0,0,0.3);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.5), 0 10px 10px rgba(0,0,0,0.4);
}


/* ==========================================================================
   REDUCED MOTION — Override all transitions
   UX Spec §Animation Timing
   ========================================================================== */

@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;
  }
}