/* ==========================================================================
   BillSathi — Colors & Type
   --------------------------------------------------------------------------
   Source of truth for tokens. Import this file once at the top of any page.
   Fonts ship with the system (see /fonts):
     • Display: New Spirit (Atipo) — uploaded by the brand team
     • Body:    Plus Jakarta Sans  — uploaded by the brand team
     • Mono:    JetBrains Mono     — loaded from Google Fonts (not branded)
   ========================================================================== */

/* ── New Spirit (display) ──────────────────────────────────────────────── */
@font-face {
  font-family: 'New Spirit';
  src: url('fonts/fonnts.com-New-Spirit-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'New Spirit';
  src: url('fonts/fonnts.com-New-Spirit-.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'New Spirit';
  src: url('fonts/fonnts.com-New-Spirit-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'New Spirit';
  src: url('fonts/fonnts.com-New-Spirit-Semi-Bold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'New Spirit';
  src: url('fonts/fonnts.com-New-Spirit-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'New Spirit Condensed';
  src: url('fonts/fonnts.com-New-Spirit-Condensed.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── Plus Jakarta Sans (body) ──────────────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraLight.ttf') format('truetype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraLightItalic.ttf') format('truetype');
  font-weight: 200; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-MediumItalic.ttf') format('truetype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-SemiBoldItalic.ttf') format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/PlusJakartaSans-ExtraBoldItalic.ttf') format('truetype');
  font-weight: 800; font-style: italic; font-display: swap;
}

/* JetBrains Mono (mono) and Poppins (Devanagari/Hindi) — Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* ── Brand palette ─────────────────────────────────────────────────────── */
  --bs-primary:           #51a454;  /* core green — buttons, links, active */
  --bs-primary-hover:     #4a9a4d;  /* hover                                */
  --bs-primary-pressed:   #3f8642;  /* pressed / dark variant               */
  --bs-primary-tint:      #eaf5ea;  /* tinted bg behind primary             */
  --bs-primary-soft:      #d6ecd6;  /* slightly stronger tint               */

  --bs-accent:            #72bd67;  /* lighter brand green — highlights     */
  --bs-accent-soft:       #e4f3e1;

  /* Gradient — bottom→top per brand spec */
  --bs-gradient-primary:  linear-gradient(to top, #51a454, #72bd67);

  /* ── Ink (neutrals tinted with brand green) ────────────────────────────── */
  --bs-ink-900:           #121721;  /* secondary / heading / brand dark     */
  --bs-ink-800:           #1d2330;  /* deep text                            */
  --bs-ink-700:           #2c3340;  /* body strong                          */
  --bs-ink-600:           #4a5260;  /* body / labels                        */
  --bs-ink-500:           #6b7280;  /* muted body                           */
  --bs-ink-400:           #9aa1ab;  /* placeholders                         */
  --bs-ink-300:           #c9cdd3;  /* divider / disabled fg                */
  --bs-ink-200:           #e3e6ea;  /* borders                              */
  --bs-ink-150:           #ecedf0;  /* hairline border on cream             */
  --bs-ink-100:           #f3f4f6;  /* hover bg                             */
  --bs-ink-50:            #f8f9fa;  /* surface alt                          */

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --bs-bg:                #f7f5f0;  /* warm off-white app background        */
  --bs-bg-alt:            #f1ede4;  /* secondary panel / illustration bg    */
  --bs-surface:           #ffffff;  /* cards                                */
  --bs-surface-2:         #fafaf7;  /* layered card                         */
  --bs-border:            #e7e3da;  /* default border on warm surfaces      */
  --bs-border-strong:     #d6d1c5;
  --bs-hover:             #f0ede4;  /* hover on warm bg                     */

  /* ── Foreground ────────────────────────────────────────────────────────── */
  --bs-fg-1:              var(--bs-ink-900); /* primary text                */
  --bs-fg-2:              var(--bs-ink-700); /* secondary text              */
  --bs-fg-3:              var(--bs-ink-500); /* muted text                  */
  --bs-fg-4:              var(--bs-ink-400); /* placeholder                 */
  --bs-fg-inv:            #ffffff;           /* text on dark/coloured bg    */

  /* ── WhatsApp / chat surfaces (used in chat UI kit) ────────────────────── */
  --bs-wa-bg:             #efeae2;  /* WhatsApp chat backdrop               */
  --bs-wa-bubble-in:      #ffffff;  /* received                             */
  --bs-wa-bubble-out:     #d9fdd3;  /* sent (BillSathi reply)               */
  --bs-wa-tick:           #53bdeb;  /* read tick blue                       */
  --bs-wa-header:         #008069;  /* WhatsApp header green                */

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --bs-success:           #22c55e;
  --bs-success-bg:        #f0fdf4;
  --bs-success-fg:        #15803d;

  --bs-warning:           #f59e0b;
  --bs-warning-bg:        #fffbeb;
  --bs-warning-fg:        #b45309;

  --bs-error:             #ef4444;
  --bs-error-bg:          #fef2f2;
  --bs-error-fg:          #b91c1c;

  --bs-info:              #3b82f6;
  --bs-info-bg:           #eff6ff;
  --bs-info-fg:           #1d4ed8;

  /* ── Radius ────────────────────────────────────────────────────────────── */
  --bs-radius-xs:         6px;
  --bs-radius-sm:         8px;
  --bs-radius-md:         12px;
  --bs-radius-lg:         16px;
  --bs-radius-xl:         20px;
  --bs-radius-2xl:        28px;
  --bs-radius-pill:       999px;

  /* ── Spacing (8px grid) ────────────────────────────────────────────────── */
  --bs-space-1:           4px;
  --bs-space-2:           8px;
  --bs-space-3:           12px;
  --bs-space-4:           16px;
  --bs-space-5:           20px;
  --bs-space-6:           24px;
  --bs-space-8:           32px;
  --bs-space-10:          40px;
  --bs-space-12:          48px;
  --bs-space-16:          64px;

  /* ── Shadows (soft, warm) ─────────────────────────────────────────────── */
  --bs-shadow-xs:         0 1px 2px rgba(18, 23, 33, 0.05);
  --bs-shadow-sm:         0 1px 3px rgba(18, 23, 33, 0.08), 0 1px 2px rgba(18, 23, 33, 0.05);
  --bs-shadow-md:         0 4px 12px rgba(18, 23, 33, 0.08), 0 2px 4px rgba(18, 23, 33, 0.04);
  --bs-shadow-lg:         0 12px 28px rgba(18, 23, 33, 0.10), 0 4px 10px rgba(18, 23, 33, 0.05);
  --bs-shadow-xl:         0 24px 48px rgba(18, 23, 33, 0.14), 0 8px 18px rgba(18, 23, 33, 0.06);
  --bs-shadow-pop:        0 8px 24px rgba(81, 164, 84, 0.22); /* green tinted */
  --bs-shadow-inset:      inset 0 2px 4px rgba(18, 23, 33, 0.05);

  /* ── Type families ─────────────────────────────────────────────────────── */
  --bs-font-display:      'New Spirit', 'Newsreader', Georgia, 'Times New Roman', serif;
  --bs-font-display-condensed: 'New Spirit Condensed', 'New Spirit', Georgia, serif;
  --bs-font-body:         'Plus Jakarta Sans', 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-font-mono:         'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  /* Hindi/Devanagari — Poppins (per brand). Used ONLY for Devanagari script. */
  --bs-font-hindi:        'Poppins', sans-serif;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --bs-ease:              cubic-bezier(0.2, 0.8, 0.2, 1);   /* default       */
  --bs-ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --bs-ease-in:           cubic-bezier(0.4, 0, 0.6, 1);
  --bs-dur-fast:          120ms;
  --bs-dur:               200ms;
  --bs-dur-slow:          320ms;
}

/* ============================================================================
   Semantic type roles. Use h1/.h1 etc directly — no need to specify sizes.
   ============================================================================ */
.bs h1, h1.bs-h1 {
  font-family: var(--bs-font-display);
  font-weight: 500;            /* Newsreader looks composed at 500           */
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--bs-fg-1);
  text-wrap: balance;
}
.bs h2, h2.bs-h2 {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--bs-fg-1);
  text-wrap: balance;
}
.bs h3, h3.bs-h3 {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--bs-fg-1);
}
.bs h4, h4.bs-h4 {
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--bs-fg-1);
}
.bs h5, h5.bs-h5,
.bs .eyebrow {
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bs-primary);
}
.bs p, p.bs-body {
  font-family: var(--bs-font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--bs-fg-2);
}
.bs .lead {
  font-family: var(--bs-font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--bs-fg-2);
}
.bs .small,
.bs small {
  font-family: var(--bs-font-body);
  font-size: 13px;
  line-height: 1.45;
  color: var(--bs-fg-3);
}
.bs .micro {
  font-family: var(--bs-font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-fg-3);
}
.bs code, code.bs-code {
  font-family: var(--bs-font-mono);
  font-size: 13px;
  background: var(--bs-ink-100);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--bs-ink-800);
}
.bs .num,
.num {
  /* tabular nums for currency / GST / totals */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================================
   Element resets used across kits
   ============================================================================ */
.bs {
  font-family: var(--bs-font-body);
  color: var(--bs-fg-1);
  background: var(--bs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}