/* =========================================================================
   Swasthya Saathi — Design Tokens
   Colors, Type, Spacing, Radii, Shadows, Gradients
   ========================================================================= */

/* =========================================================================
   Self-hosted brand fonts
   ========================================================================= */

/* Playfair Display — SemiBold (600), Bold (700), Italic (400). Regular falls
   back to Italic upright cut + system serif until a Regular TTF is supplied. */
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Bold.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/PlayfairDisplay-Italic.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

/* DM Sans — Regular (400), Medium (500), Bold (700), ExtraBold (800). */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/DMSans-ExtraBold.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================================
     BROCHURE-GROUNDED PALETTE  (sampled from Swastha.cdr — the real
     designer artwork). Cobalt blue + gold + cyan + green, color-blocked.
     Replaces the earlier cream/serif/pink-gradient register.
     ===================================================================== */

  /* ---------- Brand core ---------- */
  --ss-blue:        #2C428E;   /* PRIMARY cobalt — dominant brand color */
  --ss-blue-600:    #24387A;   /* hover / deeper cobalt */
  --ss-navy:        #2C428E;   /* headlines/wordmark map to cobalt */
  --ss-cyan:        #00A0E3;   /* sky accent — dividers, stat pops */
  --ss-gold:        #FECC00;   /* Kidvanta gold — the sub-brand accent */
  --ss-gold-600:    #E8B400;
  --ss-green:       #1E9E57;   /* healthcare green — stats/matrix */
  --ss-teal:        #00A0E3;   /* legacy alias → cyan */
  --ss-purple:      #2C428E;   /* legacy alias → cobalt (no more purple) */
  --ss-pink:        #00A0E3;   /* legacy alias → cyan (no more pink) */

  /* ---------- UI / Surface Colors ---------- */
  --ss-ui-navy:     #0A1A4A;   /* darkest section canvas */
  --ss-ui-royal:    #2C428E;   /* cobalt */
  --ss-bg:          #F3F6FC;   /* cool page background (not cream) */
  --ss-bg-white:    #FFFFFF;
  --ss-border:      #DCE3F1;   /* card outlines, dividers */

  /* ---------- Foreground / Text ---------- */
  --ss-fg-1:        #10204A;   /* primary text on light (deep blue-navy) */
  --ss-fg-2:        #45537D;   /* secondary text */
  --ss-fg-3:        #6B7699;   /* tertiary, captions */
  --ss-fg-on-dark:  #FFFFFF;
  --ss-fg-on-dark-muted: rgba(255,255,255,0.74);

  /* ---------- Semantic ---------- */
  --ss-success:     #1E9E57;
  --ss-warning:     #FECC00;
  --ss-danger:      #E5484D;
  --ss-info:        #00A0E3;

  /* ---------- Tints (for soft fills) ---------- */
  --ss-blue-tint:   #E7ECF8;
  --ss-cyan-tint:   #E1F4FD;
  --ss-gold-tint:   #FFF6D6;
  --ss-green-tint:  #E1F3E9;
  --ss-navy-tint:   #E7ECF8;
  /* legacy aliases kept so existing selectors resolve */
  --ss-purple-tint: #E7ECF8;
  --ss-pink-tint:   #E1F4FD;
  --ss-teal-tint:   #E1F4FD;

  /* ---------- Gradients ---------- */
  --ss-grad-hero:     linear-gradient(150deg, #2C428E 0%, #0A1A4A 100%);
  --ss-grad-kidvanta: linear-gradient(135deg, #FECC00 0%, #E8B400 100%);
  --ss-grad-warm:     linear-gradient(135deg, #FECC00 0%, #00A0E3 140%);
  --ss-grad-petals:   linear-gradient(135deg, #2C428E 0%, #00A0E3 100%);

  /* ---------- Type Families ---------- */
  /* Brochure is sans-serif throughout — DM Sans at heavy weights carries
     the display role (dropped the Playfair serif "editorial" look). */
  --ss-font-display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ss-font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ss-font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type Scale ---------- */
  --ss-text-xs:   12px;
  --ss-text-sm:   14px;
  --ss-text-base: 16px;
  --ss-text-md:   18px;
  --ss-text-lg:   20px;
  --ss-text-xl:   24px;
  --ss-text-2xl:  32px;
  --ss-text-3xl:  40px;
  --ss-text-4xl:  56px;
  --ss-text-5xl:  72px;

  /* ---------- Spacing (4px base) ---------- */
  --ss-sp-1:  4px;
  --ss-sp-2:  8px;
  --ss-sp-3:  12px;
  --ss-sp-4:  16px;
  --ss-sp-5:  20px;
  --ss-sp-6:  24px;
  --ss-sp-8:  32px;
  --ss-sp-10: 40px;
  --ss-sp-12: 48px;
  --ss-sp-16: 64px;
  --ss-sp-20: 80px;
  --ss-sp-24: 96px;

  /* ---------- Radii ---------- */
  --ss-radius-sm:    6px;
  --ss-radius-card:  12px;   /* default cards */
  --ss-radius-lg:    16px;   /* large cards / hero panels */
  --ss-radius-xl:    24px;
  --ss-radius-pill:  50px;
  --ss-radius-full:  9999px;

  /* ---------- Shadows ---------- */
  --ss-shadow-xs: 0 1px 2px rgba(11, 29, 92, 0.06);
  --ss-shadow-sm: 0 2px 6px rgba(11, 29, 92, 0.08);
  --ss-shadow-md: 0 8px 24px rgba(11, 29, 92, 0.10);
  --ss-shadow-lg: 0 16px 48px rgba(11, 29, 92, 0.14);
  --ss-shadow-glow-purple: 0 8px 32px rgba(150, 105, 255, 0.28);
  --ss-shadow-glow-pink:   0 8px 32px rgba(250, 110, 185, 0.28);
  --ss-shadow-glow-gold:   0 8px 32px rgba(255, 205, 100, 0.36);

  /* ---------- Borders ---------- */
  --ss-border-thin: 1px solid var(--ss-border);
  --ss-border-card: 1px solid var(--ss-border);

  /* ---------- Motion ---------- */
  --ss-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ss-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ss-dur-fast:   150ms;
  --ss-dur-base:   220ms;
  --ss-dur-slow:   400ms;
}

/* =========================================================================
   Semantic Type Roles
   ========================================================================= */

.ss-display,
.ss-h1, .ss-h2, .ss-h3, .ss-h4 {
  font-family: var(--ss-font-display);
  color: var(--ss-navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
}

.ss-display { font-size: var(--ss-text-5xl); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; }
.ss-h1      { font-size: var(--ss-text-4xl); }
.ss-h2      { font-size: var(--ss-text-3xl); }
.ss-h3      { font-size: var(--ss-text-2xl); font-weight: 600; }
.ss-h4      { font-size: var(--ss-text-xl);  font-weight: 600; }

.ss-eyebrow {
  font-family: var(--ss-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ss-teal);
  margin: 0;
}

.ss-lead {
  font-family: var(--ss-font-body);
  font-size: var(--ss-text-lg);
  line-height: 1.55;
  color: var(--ss-fg-2);
  font-weight: 400;
  margin: 0;
}

.ss-body, p.ss-p {
  font-family: var(--ss-font-body);
  font-size: var(--ss-text-base);
  line-height: 1.6;
  color: var(--ss-fg-2);
  font-weight: 400;
  margin: 0;
}

.ss-caption {
  font-family: var(--ss-font-body);
  font-size: var(--ss-text-sm);
  line-height: 1.5;
  color: var(--ss-fg-3);
  font-weight: 500;
}

.ss-stat-num {
  font-family: var(--ss-font-display);
  font-weight: 800;
  font-size: var(--ss-text-4xl);
  color: var(--ss-navy);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ss-stat-label {
  font-family: var(--ss-font-body);
  font-weight: 600;
  font-size: var(--ss-text-sm);
  color: var(--ss-fg-2);
  letter-spacing: 0.02em;
}

/* italic display variant — used sparingly for editorial accent */
.ss-display-italic, .ss-h1-italic, .ss-h2-italic {
  font-style: italic;
  font-weight: 600;
}