/* ==========================================================================
   BillSathi — Colors & Type
   --------------------------------------------------------------------------
   Source of truth for tokens. Import once at the top of any page.

   The world is a printed business document: a well-set letterhead, ruled in
   hairlines, on white paper. Three consequences you will feel while editing.

   1. Weight comes from type and space, not from outline. Rules are 1px and
      tinted (--bs-line), never a 2–3px black box edge. A black keyline
      around every element is the single thing that made this site read as a
      toy rather than as a tool a business pays for.
   2. Black is never #000. --bs-ink-900 is #14110F, warm and slightly soft.
   3. The ground is white, not cream. Decided by the owner 2026-08-19: the
      previous #f7f5f0 read as low-effort. Nothing here may drift back toward
      cream — the quiet surface is --bs-bg-alt.

   Fonts are self-hosted in /fonts — no CDN, so no visitor IP reaches a font
   provider (DPDPA). This is the pairing the previously deployed site used,
   restored on the owner's instruction 2026-08-20:
     • Display / headings:  New Spirit        (400, 500, 600, 700)
     • Body / UI:           Plus Jakarta Sans (400, 500, 600, 700)
     • Devanagari:          Poppins           (400, 500, 600)
   New Spirit carries Latin only, so the Hindi line on a board is set in
   Poppins and reached through unicode-range — no glyph fallback surprises.
   ========================================================================== */

@font-face { font-family: 'New Spirit'; src: url('./fonts/NewSpirit-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'New Spirit'; src: url('./fonts/NewSpirit-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'New Spirit'; src: url('./fonts/NewSpirit-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'New Spirit'; src: url('./fonts/NewSpirit-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/PlusJakartaSans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/PlusJakartaSans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/PlusJakartaSans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Plus Jakarta Sans'; src: url('./fonts/PlusJakartaSans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* Devanagari only. Loaded solely when a Devanagari codepoint appears, so an
   English-only page never pays for it. The rupee sign (U+20B9) is deliberately
   NOT in this range even though Poppins carries it: with Poppins listed first,
   ₹199 set the sign in a sans and the digits in the serif. Both Latin faces
   have their own ₹. */
@font-face {
  font-family: 'Poppins Deva';
  src: url('./fonts/Poppins-400-devanagari.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Poppins Deva';
  src: url('./fonts/Poppins-500-devanagari.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}
@font-face {
  font-family: 'Poppins Deva';
  src: url('./fonts/Poppins-600-devanagari.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF;
}

:root {
  /* ── The paint cans ─────────────────────────────────────────────────────
     One green family derived from the logo, plus the two other pigments an
     Indian sign painter actually keeps on the shelf: vermilion and marigold.
     Nothing here interpolates into anything else.                          */

  --paint-green-900:      #123d1c;  /* the shadow a green plate casts       */
  --paint-green-800:      #17512a;
  --paint-green-700:      #2a7535;  /* ENAMEL FIELD — large painted areas   */
  --paint-green-600:      #51a454;  /* THE LOGO GREEN — do not change       */
  --paint-green-500:      #6fbb6b;
  --paint-green-100:      #dcefdb;
  --paint-green-50:       #eef7ed;

  --paint-red-800:        #8e1f10;
  --paint-red-600:        #d33b25;  /* vermilion — the "old way" plate      */
  --paint-red-100:        #fbe3de;

  --paint-yellow-700:     #b87200;
  --paint-yellow-500:     #f0a81e;  /* marigold — on ink and on white       */
  --paint-yellow-300:     #f7c14a;  /* marigold for use ON a green plate    */
  --paint-yellow-100:     #fdefd2;

  /* ── Brand aliases (kept: the rest of the site addresses these) ───────── */
  --bs-primary:           var(--paint-green-600);
  --bs-primary-hover:     #479548;
  --bs-primary-pressed:   #3c8340;
  --bs-primary-tint:      var(--paint-green-50);
  --bs-primary-soft:      var(--paint-green-100);
  --bs-primary-field:     var(--paint-green-700);
  --bs-primary-shadow:    var(--paint-green-900);

  --bs-accent:            var(--paint-yellow-500);
  --bs-accent-soft:       var(--paint-yellow-100);

  /* ── Ink. Warm near-black, because enamel black is never pure. ───────── */
  --bs-ink-900:           #14110f;
  --bs-ink-800:           #241f1c;
  --bs-ink-700:           #3a3430;
  --bs-ink-600:           #524b45;
  --bs-ink-500:           #6a625c;
  --bs-ink-400:           #7a736c;
  --bs-ink-300:           #b4ada6;
  --bs-ink-200:           #ddd8d2;
  --bs-ink-150:           #e7e3de;
  --bs-ink-100:           #efece8;
  --bs-ink-50:            #f7f5f3;

  /* ── Surfaces. White ground; the quiet surface is tinted green, never
        yellow, so the page can never drift back to cream.                  */
  --bs-bg:                #ffffff;
  --bs-bg-alt:            #f1f4f0;
  --bs-surface:           #ffffff;
  --bs-surface-2:         #f7f9f6;
  --bs-border:            var(--bs-ink-200);
  --bs-border-strong:     var(--bs-ink-900);  /* the painted outline        */
  --bs-hover:             var(--bs-ink-50);

  /* ── Foreground ─────────────────────────────────────────────────────── */
  --bs-fg-1:              var(--bs-ink-900);
  --bs-fg-2:              var(--bs-ink-700);
  --bs-fg-3:              var(--bs-ink-500);
  --bs-fg-4:              var(--bs-ink-400);
  --bs-fg-inv:            #ffffff;
  /* On a green plate, secondary text is tinted from the plate's own hue.
     Grey on green is the tell that nobody looked at it.                    */
  --bs-fg-on-ink-2:       #cfc9c3;  /* secondary text on an ink plate      */

  /* ── WhatsApp chat surfaces (the demo uses the real ones) ───────────── */
  --bs-wa-bg:             #efeae2;
  --bs-wa-bubble-in:      #ffffff;
  --bs-wa-bubble-out:     #d9fdd3;
  --bs-wa-tick:           #53bdeb;
  --bs-wa-header:         #008069;

  /* ── The flag. Borrowed, not ours: these two never appear anywhere except
        the footer's tricolour band. Do not reach for them as accents.    */
  --flag-saffron:         #ff9933;
  --flag-green:           #138808;

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --bs-success:           var(--paint-green-700);
  --bs-success-bg:        var(--paint-green-50);
  --bs-success-fg:        var(--paint-green-800);
  --bs-warning:           var(--paint-yellow-700);
  --bs-warning-bg:        var(--paint-yellow-100);
  --bs-warning-fg:        #8a5600;
  --bs-error:             var(--paint-red-600);
  --bs-error-bg:          var(--paint-red-100);
  --bs-error-fg:          var(--paint-red-800);
  --bs-info:              #1d4ed8;
  --bs-info-bg:           #eef2ff;
  --bs-info-fg:           #1e3a8a;

  /* ── Radius. Paper and panels, not cut tin. Nothing here is a novelty
        shape; the arc-top plate is gone.                                   */
  --bs-radius-xs:         3px;
  --bs-radius-sm:         6px;
  --bs-radius-md:         10px;
  --bs-radius-lg:         14px;
  --bs-radius-xl:         18px;
  --bs-radius-2xl:        24px;
  --bs-radius-pill:       999px;

  /* ── Rules. One hairline weight everywhere. The COLOUR is what changed:
        a border is a tint of the ink, not the ink itself. --bs-line is the
        default edge; --bs-line-strong is for a table head or a divider that
        has to be found while scanning. Solid --bs-ink-900 is reserved for
        the two or three places an edge is genuinely the point.             */
  --bs-rule:              1px;
  --bs-rule-heavy:        1px;
  --bs-line:              rgba(20, 17, 15, 0.13);
  --bs-line-strong:       rgba(20, 17, 15, 0.24);
  --bs-line-inv:          rgba(255, 255, 255, 0.18);

  /* ── 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;
  --bs-space-20:          80px;
  --bs-space-24:          96px;

  /* ── Depth. Paper on a desk: shallow, wide, low-opacity. Nothing on this
        site casts a hard-edged shadow, and no letter casts one at all.     */
  --bs-shadow-xs:         0 1px 2px rgba(20, 17, 15, 0.06);
  --bs-shadow-sm:         0 2px 4px rgba(20, 17, 15, 0.07), 0 1px 2px rgba(20, 17, 15, 0.05);
  --bs-shadow-md:         0 4px 12px rgba(20, 17, 15, 0.07), 0 1px 3px rgba(20, 17, 15, 0.04);
  --bs-shadow-lg:         0 10px 26px rgba(20, 17, 15, 0.08), 0 3px 7px rgba(20, 17, 15, 0.04);
  --bs-shadow-xl:         0 20px 44px rgba(20, 17, 15, 0.10), 0 5px 12px rgba(20, 17, 15, 0.05);
  --bs-shadow-pop:        0 10px 26px rgba(18, 61, 28, 0.26);
  --bs-shadow-inset:      inset 0 2px 4px rgba(20, 17, 15, 0.06);

  /* ── Type families ──────────────────────────────────────────────────── */
  /* 'Poppins Deva' is listed FIRST in both stacks: its unicode-range means
     it only ever claims Devanagari codepoints, so Latin still falls to New
     Spirit / Plus Jakarta Sans as normal. */
  --bs-font-display:      'Poppins Deva', 'New Spirit', 'Newsreader', Georgia, 'Times New Roman', serif;
  --bs-font-display-condensed: var(--bs-font-display);
  --bs-font-body:         'Poppins Deva', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-font-mono:         ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --bs-font-hindi:        'Poppins Deva', var(--bs-font-body);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --bs-ease:              cubic-bezier(0.2, 0.8, 0.2, 1);
  --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;
  --bs-dur-paint:         700ms;   /* one pass of the brush */
}

/* ============================================================================
   Type roles — use h1/.bs-h1 directly, no per-page sizes.

   Display is New Spirit: a serif, set at 500 and NOT in capitals. A serif
   in all-caps at 80px is the loudest thing a page can do and it is what
   made this site read as a poster instead of as a product. Capitals survive
   only on small labels, where they are a label device rather than a shout.
   Body is Plus Jakarta Sans at 17px.
   ============================================================================ */

:where(.bs h1, h1.bs-h1) {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--bs-fg-1);
  text-wrap: balance;
  margin: 0;
}
:where(.bs h2, h2.bs-h2) {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: clamp(30px, 3.6vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--bs-fg-1);
  text-wrap: balance;
  margin: 0;
}
:where(.bs h3, h3.bs-h3) {
  font-family: var(--bs-font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.2vw, 30px);
  line-height: 1.18;
  letter-spacing: -0.014em;
  color: var(--bs-fg-1);
  margin: 0;
}
/* h4 steps out of the display face on purpose: below ~22px a text serif and
   the body sans are close enough in colour that mixing them reads as an
   accident rather than a hierarchy. */
:where(.bs h4, h4.bs-h4) {
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--bs-fg-1);
  margin: 0;
}
:where(.bs h5, h5.bs-h5) {
  font-family: var(--bs-font-body);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: var(--bs-fg-1);
  margin: 0;
}
:where(.bs p, p.bs-body) {
  font-family: var(--bs-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--bs-fg-2);
}
:where(.bs .lead) {
  font-family: var(--bs-font-body);
  font-weight: 500;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--bs-fg-2);
}
:where(.bs .small, .bs small) {
  font-family: var(--bs-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--bs-fg-3);
}
:where(.bs .micro) {
  font-family: var(--bs-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bs-fg-3);
}
:where(.bs code, code.bs-code) {
  font-family: var(--bs-font-mono);
  font-size: 0.92em;
  background: var(--bs-ink-100);
  padding: 2px 6px;
  border-radius: var(--bs-radius-xs);
  color: var(--bs-ink-800);
}

/* Money, quantities, doc numbers, the 5-second readout. Tabular by default
   so a counting number does not shuffle its own width while it counts. */
.bs .num, .num, .bs .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ============================================================================
   Base reset
   ============================================================================ */
.bs {
  font-family: var(--bs-font-body);
  color: var(--bs-fg-1);
  background: var(--bs-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================================
   The surfaces we did not draw. These ship with browser defaults that belong
   to no design system, and theming them is the cheapest evidence that a page
   was built rather than assembled.
   ============================================================================ */
::selection {
  background: var(--paint-yellow-100);
  color: var(--bs-ink-900);
}
:root {
  caret-color: var(--paint-green-700);
  accent-color: var(--paint-green-700);
  scrollbar-color: var(--bs-ink-300) transparent;
  scrollbar-width: thin;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bs-ink-50); }
::-webkit-scrollbar-thumb {
  background: var(--bs-ink-250, var(--bs-ink-300));
  border: 3px solid var(--bs-ink-50);
  border-radius: var(--bs-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--bs-ink-400); }

/* Ink outline, marigold halo. Visible on white and on ink alike, which one
   colour would not be. */
:focus-visible {
  outline: 2px solid var(--bs-ink-900);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(240, 168, 30, 0.55);
  border-radius: var(--bs-radius-xs);
}
.on-ink :focus-visible,
.on-ink :focus-visible {
  outline-color: #ffffff;
}

a { text-underline-offset: 0.16em; text-decoration-thickness: 0.08em; }