/* ============================================================================
   Sara+Care Design System — Colors & Type
   Brand: Sara Healthcare Pvt. Ltd. / Sara+Care®
   Tagline: "Ideas for Better Health"
   ============================================================================ */

/* ---------------- Google Fonts (Poppins is OFFICIAL per brandbook) -----------
   - Poppins → primary typeface for ALL body, UI, and display (Pomelli brandbook)
   - Cormorant Garamond → "Ideas for Better Health" tagline serif (supplementary —
     inherited from current wordmark, not in brandbook)
   - Caveat / Allura → packaging brush-script product names (supplementary —
     inherited from packaging artwork, not in brandbook)                          */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Caveat:wght@500;700&family=Allura&display=swap');

:root {
  /* ===========================================================================
     COLORS — Sara+Care brand blues
     -------
     The brand lives across two related blue families that you can mix freely:

       Reference blues from the Pomelli brandbook (institutional / formal):
         · Deep Cobalt    #17449E
         · Admiral Blue   #113377
         · Sapphire Blue  #1C4CA5
         · Pure White     #FFFFFF

       Warmer brand blues observed on sarahealthcare.com & packaging
       (consumer-facing / friendlier — also a perfectly valid voice):
         · Brand Blue     #1A6FBF  (the wordmark blue on the live site)
         · Burst Sky      #4FB0E5  (the cyan spark above the +)

     The Pomelli brandbook is a reference, not a strict rule — pick whichever
     blue feels right for the surface you're designing.
     =========================================================================== */

  /* — Reference brandbook palette (Pomelli) — */
  --sc-cobalt:        #17449E;
  --sc-admiral:       #113377;
  --sc-sapphire:      #1C4CA5;
  --sc-white:         #FFFFFF;

  /* — Brand-blue ramp (the working palette for UI surfaces) — */
  --sc-blue-900: #0B2A4A;       /* darkest — footers, navy backgrounds */
  --sc-blue-800: #113377;       /* deep — headlines (= Admiral Blue) */
  --sc-blue-700: #134E8E;       /* nav / link */
  --sc-blue-600: #1A6FBF;       /* primary CTA / wordmark on live site */
  --sc-blue-500: #2B8FE0;       /* packaging top stripe */
  --sc-blue-400: #4FB0E5;       /* burst spark, sky accent */
  --sc-blue-300: #8CCFF0;
  --sc-blue-200: #C8E7F7;       /* tint backgrounds */
  --sc-blue-100: #E6F2FB;       /* card hover wash */
  --sc-blue-50:  #F3F8FC;       /* page section wash */

  /* — Burst / spark accent (the cyan above the + in the logo) — */
  --sc-burst-500: #4FB0E5;

  /* — Warm accent (packaging script names, warm social tiles) — */
  --sc-orange-700: #C44A1E;
  --sc-orange-600: #E15B3C;     /* "Blood Pressure" script on BPM-103 box */
  --sc-orange-500: #F47B3E;
  --sc-orange-300: #F9B98A;
  --sc-orange-100: #FCEADD;

  /* — Other supports — */
  --sc-pink-600: #D63989;       /* "SmartNEB PLUS" magenta callout */
  --sc-pink-500: #E66B8F;
  --sc-pink-100: #FBE2EE;
  --sc-green-700: #1F7F46;
  --sc-green-600: #2E9D5B;      /* hygiene / safe-step icons */
  --sc-green-500: #57B97A;
  --sc-green-100: #DFF1E5;
  --sc-yellow-500: #F5C24A;     /* CODE # chip on packaging */
  --sc-gold-500:  #D9A521;      /* warranty seal */
  --sc-red-600: #D43A2F;

  /* — Neutrals (cool-leaning to harmonize with the blues) — */
  --sc-paper:    #FAFBFD;       /* default page background */
  --sc-cloud:    #F2F5F8;       /* card / section wash */
  --sc-stone-100:#E7ECF1;       /* hairline dividers */
  --sc-stone-200:#CFD7E0;       /* form borders */
  --sc-stone-300:#A9B4C0;       /* placeholder text */
  --sc-stone-500:#6A7787;       /* secondary text */
  --sc-stone-700:#3A4654;       /* body text */
  --sc-stone-900:#101926;       /* primary text / near-black */

  /* — Semantic foreground / background — */
  --fg-1: var(--sc-stone-900);  /* primary text */
  --fg-2: var(--sc-stone-700);  /* body text */
  --fg-3: var(--sc-stone-500);  /* secondary / meta */
  --fg-muted: var(--sc-stone-300);
  --fg-on-blue: var(--sc-white);
  --fg-brand: var(--sc-blue-600);
  --fg-brand-dark: var(--sc-blue-800);
  --fg-accent: var(--sc-orange-600);

  --bg-1: var(--sc-white);      /* base surface */
  --bg-2: var(--sc-paper);      /* page background */
  --bg-3: var(--sc-cloud);      /* alt surface */
  --bg-tint: var(--sc-blue-50); /* tinted section */
  --bg-brand: var(--sc-blue-600);
  --bg-brand-dark: var(--sc-blue-800);
  --bg-accent: var(--sc-orange-600);

  --border-1: var(--sc-stone-100);
  --border-2: var(--sc-stone-200);
  --border-strong: var(--sc-stone-300);

  /* — Status — */
  --status-ok:   var(--sc-green-600);
  --status-warn: var(--sc-yellow-500);
  --status-err:  var(--sc-red-600);

  /* ===========================================================================
     TYPE
     - "Poppins" is the working stand-in for the website body. The site renders
       a Poppins-like geometric sans; we adopt it as the body family.
     - "Nunito" is the working stand-in for the wordmark/headers. The real
       Sara+Care wordmark is a proprietary rounded sans; for live UI we use
       Nunito and we use the logo PNG/PDF anywhere the wordmark itself appears.
     - "Cormorant Garamond" stands in for the tagline serif on packaging.
     - "Caveat / Allura" stand in for the brush-script product names painted
       across boxes ("Blood Pressure", "Diapers", "Vaporizer", "Mesh").
     =========================================================================== */

  /* ===========================================================================
     TYPE
     -------
     Poppins is the primary face — it's what the live site uses and what the
     Pomelli brandbook recommends. The tagline serif and packaging brush-script
     are supplementary, inherited from the wordmark and packaging artwork.
     =========================================================================== */

  --font-primary: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    var(--font-primary);
  --font-display: var(--font-primary);
  --font-tagline: 'Cormorant Garamond', 'Times New Roman', serif;     /* tagline serif on wordmark */
  --font-script:  'Caveat', 'Allura', cursive;                         /* packaging brush-script */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — page (web) */
  --fs-display:   clamp(40px, 5.2vw, 64px);  /* hero "Digital Blood Pressure Monitor" */
  --fs-h1:        40px;
  --fs-h2:        32px;   /* "Our Products" / "About us" */
  --fs-h3:        24px;
  --fs-h4:        20px;
  --fs-h5:        18px;
  --fs-lead:      18px;   /* hero supporting copy */
  --fs-body:      16px;   /* default */
  --fs-sm:        14px;
  --fs-xs:        12px;
  --fs-eyebrow:   12px;   /* "ABOUT US — " caps eyebrow on packaging */

  --lh-tight:     1.15;
  --lh-snug:      1.3;
  --lh-normal:    1.55;
  --lh-relaxed:   1.7;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.18em;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ===========================================================================
     SPACING / RADIUS / SHADOW / MOTION
     The site uses generous whitespace, big rounded buttons (~28px radius pill),
     soft white cards on a near-white page, and a single subtle outer shadow.
     =========================================================================== */

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

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;        /* logo wrapper, CTAs, callout pills */

  /* Soft brand shadow — sits low and cool */
  --shadow-xs: 0 1px 2px rgba(15, 61, 114, 0.05);
  --shadow-sm: 0 2px 6px rgba(15, 61, 114, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 61, 114, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 61, 114, 0.10);
  --shadow-cta:0 10px 24px rgba(26, 111, 191, 0.32);  /* glow under blue CTAs */
  --shadow-inner: inset 0 0 0 1px rgba(15, 61, 114, 0.06);

  /* Motion */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-emphasize: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 360ms;
}

/* ============================================================================
   SEMANTIC TYPE PRESETS
   Apply by class — these mirror how copy renders on sarahealthcare.com and
   across packaging.
   ============================================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--fg-2);
  background: var(--bg-2);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.sc-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.sc-h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg-brand-dark); }
.sc-h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-snug);  color: var(--fg-brand-dark); }
.sc-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug);  color: var(--fg-brand-dark); }
.sc-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-h4); line-height: var(--lh-snug);  color: var(--fg-1); }
.sc-h5 { font-family: var(--font-body);    font-weight: var(--fw-semibold); font-size: var(--fs-h5); line-height: var(--lh-snug);  color: var(--fg-1); }

.sc-lead   { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--fg-2); font-weight: var(--fw-regular); }
.sc-body   { font-size: var(--fs-body); line-height: var(--lh-normal);  color: var(--fg-2); }
.sc-small  { font-size: var(--fs-sm);   line-height: var(--lh-normal);  color: var(--fg-3); }
.sc-tiny   { font-size: var(--fs-xs);   line-height: var(--lh-normal);  color: var(--fg-3); }

/* Eyebrow / caps — the "ABOUT US ___" pattern on the site */
.sc-eyebrow {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

/* Tagline — "Ideas for Better Health" serif */
.sc-tagline {
  font-family: var(--font-tagline);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--fg-1);
  letter-spacing: 0.01em;
}

/* Script — "Blood Pressure", "Diapers", "Mesh", "Vaporizer" handwritten product names */
.sc-script {
  font-family: var(--font-script);
  font-weight: 700;
  color: var(--sc-orange-600);
  line-height: 0.9;
}

/* Code/SKU chip — "CODE # NEB-103" yellow pill on packaging */
.sc-code-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sc-yellow-500);
  color: var(--sc-blue-900);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--tracking-wide);
  padding: 4px 10px;
  border-radius: 4px;
}

/* Links */
a { color: var(--fg-brand); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--fg-brand-dark); text-decoration: underline; text-underline-offset: 3px; }