/* ============================================================
   BHARATSURE DESIGN SYSTEM — Colors & Typography
   Source: Safetynet Design System Figma (Bharatsure / Healthysure)
   Font: Inter (primary), Roboto Mono (code)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400&display=swap');

/* ─── BRAND COLOR SCALES ─────────────────────────────────── */
:root {
  /* Healthysure primary */
  --healthysure-primary-light: #11A387;
  --healthysure-primary-dark:  #053128;

  /* Zomp (brand teal-green) */
  --zomp-700:  #0A6251;
  --zomp-600:  #0E826C;
  --zomp-500:  var(--healthysure-primary-light);   /* PRIMARY brand color */
  --zomp-400:  #41B59F;
  --zomp-300:  #70C8B7;
  --zomp-200:  #A0DACF;
  --zomp-100:  #CFE9E7;
  --zomp-50:   #E7F6F3;

  /* Grey (neutrals) */
  --grey-900:  #292D30;
  --grey-800:  #383E42;
  --grey-700:  #4B5054;   /* primary text */
  --grey-600:  #5F6467;
  --grey-500:  #797C81;
  --grey-400:  #93959B;   /* secondary text */
  --grey-300:  #C9CACD;   /* borders / dividers */
  --grey-200:  #E9E9EA;
  --grey-100:  #F5F5F5;
  --grey-50:   #FAFAFA;   /* page background */

  /* Healthysure dark primary */
  --dark-900:  var(--healthysure-primary-dark);
  --dark-800:  #074238;
  --dark-700:  #0A4D42;

  /* Semantic / Feedback */
  --success-50:   #F8FFF8;
  --success-300:  #81C795;
  --success-500:  #2DA24F;  /* default success */
  --success-600:  #1A8038;

  --error-50:    #FFF0F0;
  --error-500:   #CC2626;
  --error-600:   #D65151;

  --warning-50:  #FEF8EE;
  --warning-300: #F5C77A;
  --warning-500: #C29244;

  --info-50:     #FDF1F3;
  --info-300:    #F5A9B7;
  --info-500:    #EF7087;
  --info-600:    #A74E5F;

  /* Hyperlink / Interactive Blue */
  --blue-600:    #227AE5;
  --blue-500:    #2285E8;
  --blue-100:    #E9F2FC;

  /* White / Black */
  --white:       #FFFFFF;
  --black:       #000000;

  /* ─── SEMANTIC TOKENS ──────────────────────────────────── */

  /* Backgrounds */
  --bg-page:        var(--grey-50);      /* #FAFAFA — outer page/shell */
  --bg-surface:     var(--white);        /* cards, panels, sidebar */
  --bg-subtle:      var(--grey-100);     /* #F5F5F5 — section fills */
  --bg-overlay:     rgba(0,0,0,0.4);     /* scrims */

  /* Borders */
  --border-default: var(--grey-300);     /* #C9CACD */
  --border-subtle:  var(--grey-200);     /* #E9E9EA */
  --border-strong:  var(--grey-400);

  /* Text */
  --text-primary:    var(--grey-700);    /* #4B5054 — body */
  --text-secondary:  var(--grey-400);    /* #93959B — captions, hints */
  --text-disabled:   var(--grey-300);
  --text-inverse:    var(--white);
  --text-link:       var(--blue-600);
  --text-brand:      var(--zomp-500);

  /* Interactive */
  --interactive-primary:         var(--zomp-500);
  --interactive-primary-hover:   var(--zomp-600);
  --interactive-primary-pressed: var(--zomp-700);
  --interactive-selected-bg:     var(--dark-900);

  /* Status */
  --status-success: var(--success-500);
  --status-error:   var(--error-500);
  --status-warning: var(--warning-500);
  --status-info:    var(--info-500);

  /* ─── SPACING SCALE ─────────────────────────────────────── */
  --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;

  /* ─── BORDER RADIUS ─────────────────────────────────────── */
  --radius-sm:   4px;    /* buttons, inputs, chips, badges */
  --radius-md:   8px;    /* cards, modals */
  --radius-lg:   12px;
  --radius-full: 9999px; /* pills */

  /* ─── SHADOWS ───────────────────────────────────────────── */
  --shadow-sm:  2px 2px 8px 0px rgba(75,80,84,0.10);
  --shadow-md:  2px 4px 16px 0px rgba(75,80,84,0.12);
  --shadow-lg:  4px 8px 24px 0px rgba(0,0,0,0.10);
  --shadow-card: 2px 2px 12px 0px rgba(0,0,0,0.06);

  /* ─── TYPOGRAPHY ────────────────────────────────────────── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  'Roboto Mono', 'Courier New', monospace;

  /* Size scale */
  --text-xs:   12px;  /* line-height: 16px */
  --text-sm:   14px;  /* line-height: 20px */
  --text-md:   16px;  /* line-height: 24px */
  --text-lg:   20px;  /* line-height: 28px */
  --text-xl:   24px;  /* line-height: 32px */
  --text-2xl:  32px;  /* line-height: 36px */
  --text-3xl:  64px;  /* display / hero */

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
}

/* ─── RESET / BASE ──────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ─── SEMANTIC TYPE STYLES ──────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 20px;
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 36px;
  color: var(--text-primary);
}

h2 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: 32px;
  color: var(--text-primary);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 28px;
  color: var(--text-primary);
}

h4 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 24px;
  color: var(--text-primary);
}

h5, h6 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 20px;
  color: var(--text-primary);
}

p {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: 20px;
  color: var(--text-primary);
}

small, .text-xs {
  font-size: var(--text-xs);
  line-height: 16px;
  color: var(--text-secondary);
}

label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 20px;
  color: var(--text-primary);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 16px;
}

a {
  color: var(--text-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ─── FAQ / ACCORDION SECTION ───────────────────────────── */
.faq-section {
  padding: 64px 0;
  background: var(--white);
  border-top: 1px solid var(--border-subtle);
}

.faq-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
  padding: 0 16px;
}

.faq-header h2 {
  font-size: 32px;
  line-height: 40px;
  color: var(--healthysure-primary-dark);
  margin-bottom: 12px;
}

.faq-header p {
  font-size: 16px;
  line-height: 24px;
  color: var(--grey-600);
}

.faq-grid {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 0 16px;
}

.faq-item {
  background: var(--grey-50);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.faq-item:hover {
  border-color: var(--healthysure-primary-light);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  padding: 20px 24px;
  font-size: 16px;
  font-weight: var(--weight-semibold);
  color: var(--grey-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
  user-select: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 24px;
  font-weight: var(--weight-regular);
  color: var(--healthysure-primary-light);
  transition: transform 200ms ease;
  margin-left: 16px;
  flex-shrink: 0;
  line-height: 1;
}

.faq-item[open] summary::after {
  content: "−";
  transform: rotate(180deg);
}

.faq-item .faq-answer {
  padding: 0 24px 20px;
  font-size: 15px;
  line-height: 24px;
  color: var(--grey-700);
}

.faq-item[open] summary {
  color: var(--healthysure-primary-dark);
}