/* ApresMeet Design System — Phase 1
   Add this file ONCE in pre_body.php, before all other CSS files.
   Change colours here and they update everywhere. */

:root {
  --am-navy:        #0D1B2A;
  --am-navy-800:    #1A2E42;
  --am-teal:        #00C49A;
  --am-teal-mid:    #00A880;
  --am-teal-light:  #E0FAF4;
  --am-amber:       #F5A623;
  --am-amber-light: #FEF3DC;
  --am-slate:       #64748B;
  --am-slate-200:   #E2E8F0;
  --am-slate-100:   #F1F5F9;
  --am-white:       #FFFFFF;
  --am-red:         #EF4444;
  --am-red-light:   #FEF2F2;

  --am-r-sm:   8px;
  --am-r-md:   10px;
  --am-r-lg:   16px;
  --am-r-xl:   20px;
  --am-r-pill: 100px;
}

/* Google Fonts — DM Sans + DM Serif Display */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Serif+Display:ital@0;1&display=swap');

/* Global base overrides */
body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--am-slate-100);
  color: var(--am-navy);
}

h1, h2, h3, .brand-heading {
  font-family: 'DM Serif Display', serif;
}

/* Override Bootstrap focus colour */
.form-control:focus {
  border-color: var(--am-teal);
  box-shadow: none;
}

/* Button system */
.btn-am-primary {
  background: var(--am-navy);
  color: white;
  border-radius: var(--am-r-pill);
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.btn-am-teal {
  background: var(--am-teal);
  color: var(--am-navy);
  border-radius: var(--am-r-pill);
  padding: 10px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  border: none;
}

.btn-am-outline {
  background: transparent;
  border: 1.5px solid var(--am-navy);
  border-radius: var(--am-r-pill);
  color: var(--am-navy);
}

.btn-am-danger {
  background: transparent;
  border: 1.5px solid var(--am-red);
  color: var(--am-red);
  border-radius: var(--am-r-pill);
}

/* Badge system */
.badge-am-free {
  background: var(--am-teal-light);
  color: #00705A;
  border-radius: var(--am-r-pill);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
}

.badge-am-premium {
  background: var(--am-navy);
  color: white;
  border-radius: var(--am-r-pill);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
}

.badge-am-amber {
  background: var(--am-amber-light);
  color: #8B5E00;
  border-radius: var(--am-r-pill);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
}