/* ==========================================================================
   Ledger · design tokens
   The page is a sheet of green columnar ledger paper. Every value below is
   a role; components never use raw hex, px sizes or ad-hoc shadows.
   ========================================================================== */

:root {
  /* ---- Colour roles ------------------------------------------------------ */
  --paper: #E4ECDF;          /* ledger green: the page */
  --paper-deep: #D8E3D2;     /* the same stock, one shade down (bands, wells) */
  --sheet: #FBFCFA;          /* documents lying on the page */
  --ink: #15181B;            /* text */
  --carbon: #3A4046;         /* secondary text (8.6:1 on paper) */
  --line: #66707A;           /* control borders, ≥ 3:1 on paper and sheet */
  --rule: #7D9CC0;           /* blue ruling (decorative) */
  --rule-soft: rgb(125 156 192 / 0.42);
  --rule-faint: rgb(125 156 192 / 0.22);
  --margin: #C1272D;         /* margin red: rules, stamps, the thread (4.9:1 on paper) */
  --bahi: #8E1B1B;           /* bahi red: the cloth of the bahi-khata; CTA and bold blocks */
  --bahi-deep: #6F1414;      /* pressed state for bahi surfaces */
  --on-bahi: #FBFCFA;        /* text on bahi red (8.6:1) */
  --on-bahi-soft: #E9C9C4;   /* secondary text on bahi red (6.1:1) */

  /* A static paper grain at about 3%, for sheets only (documents, tape, cards). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .12  0 0 0 0 .1  0 0 0 .1 -.025'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---- Type families ----------------------------------------------------- */
  --font-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-deva: "Tiro Devanagari Hindi", "Kohinoor Devanagari", "Noto Serif Devanagari", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (8 tokens, fluid) ------------------------------------- */
  --fs-cap: 0.75rem;                                         /* 12   mono labels   */
  --fs-sm: clamp(0.875rem, 0.84rem + 0.12vw, 0.9375rem);     /* 14–15 captions     */
  --fs-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);      /* 17–19 text         */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);     /* 19–24 lead         */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);       /* 22–30              */
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.625rem);            /* 32–58              */
  --fs-display: clamp(3.625rem, 1.2rem + 8.4vw, 9rem);       /* 58–144 the H1      */
  --fs-mega: clamp(4.5rem, 2rem + 10vw, 11rem);              /* big figures        */

  /* ---- Spacing scale ----------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 6.5rem;
  --s-section: clamp(2.5rem, 1.25rem + 3vw, 4.5rem);

  /* ledger row pitch: every ruled list uses it */
  --row: 2.125rem;

  /* ---- Radii: 2 + full ---------------------------------------------------- */
  --r-1: 2px;     /* paper, documents, buttons */
  --r-2: 10px;    /* product windows */
  --r-full: 999px;

  /* ---- Elevation: 2 -------------------------------------------------------- */
  --e-1: 0 1px 0 rgb(21 24 27 / 0.05), 0 1px 3px rgb(21 24 27 / 0.08);
  --e-2: 0 1px 2px rgb(21 24 27 / 0.08), 0 18px 40px -18px rgb(21 24 27 / 0.30);

  /* ---- Motion ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ink: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  /* ---- The ledger ruling (page grid) -------------------------------------
     gutter | folio (date) ‖ particulars | Dr | Cr | tape | gutter
     Every section places content on these named lines.                     */
  --max: 1600px;
  --gut: max(2.5rem, calc((100% - var(--max)) / 2));
  --folio: 8rem;
  --mgap: 2.5rem;
  --money: 10rem;
  --tape: 8.5rem;
  --grid:
    [full-start] var(--gut)
    [folio-start] var(--folio)
    [folio-end] var(--mgap)
    [body-start] minmax(0, 1fr)
    [body-end dr-start] var(--money)
    [dr-end cr-start] var(--money)
    [cr-end tape-start] var(--tape)
    [tape-end] var(--gut)
    [full-end];

  --nav-h: 4.25rem;
}

/* Wide screens: the money columns widen so the balance can be the hero's anchor. */
@media (min-width: 1280px) {
  :root { --money: 12rem; }
}

@media (max-width: 1279px) {
  :root { --tape: 0rem; --gut: 2rem; }
}

@media (max-width: 1023px) {
  :root { --folio: 5.5rem; --mgap: 1.75rem; --money: 8rem; --gut: 1.5rem; }
}

@media (max-width: 719px) {
  :root {
    --gut: 1rem;
    --folio: 0rem;
    --mgap: 1.375rem;
    --money: 0rem;
    --row: 2.125rem;
    --nav-h: 3.75rem;
  }
}