/* ============================================================
   VIJMITRA BRAND STYLESHEET  —  canonical, do not fork
   Use this file for every Vijmitra deliverable (one-pagers,
   reports, decks, web, email). Override nothing except spacing.
   ============================================================ */

/* --- Webfonts -----------------------------------------------
   Preference 1 fonts are loaded from Google Fonts. If the file
   is used offline or embedded in a PDF pipeline without network,
   the stacks below fall through to Preference 2 then 3 with no
   further edits needed.
   ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Tiro+Devanagari+Marathi:ital@0;1&family=Mukta:wght@200;300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  /* ---- Colour ---- */
  --vij-primary:        #5B1E9E;   /* headings, brand marks, key emphasis */
  --vij-secondary:      #F4F1FC;   /* panels, table stripes, quiet surfaces */
  --vij-contrast:       #B2845D;   /* accents, rules, numerals — never body text */
  --vij-bg:             #FDFCFD;   /* page */
  --vij-text:           #150D2B;   /* all running text */

  /* ---- Derived (do not invent new colours; use these) ---- */
  --vij-primary-deep:   #431675;   /* pressed / dense fills */
  --vij-primary-tint:   rgba(91, 30, 158, 0.08);
  --vij-contrast-tint:  rgba(178, 132, 93, 0.14);
  --vij-text-muted:     rgba(21, 13, 43, 0.64);
  --vij-text-faint:     rgba(21, 13, 43, 0.44);
  --vij-rule:           rgba(21, 13, 43, 0.12);
  --vij-rule-strong:    rgba(21, 13, 43, 0.22);
  --vij-on-primary:     #FDFCFD;

  /* ---- Type stacks ----
     One stack covers both scripts, via per-glyph fallback.

     ORDERING RULE — do not reshuffle these into preference tiers.
     All THREE Latin faces come first, then all three Devanagari
     faces. Reason: Mukta and Tiro Devanagari Marathi ship their
     own Latin glyphs (verified). If a Devanagari face sat at
     position 2, then whenever Preference 1 was unavailable it
     would capture the Latin text too — so Latin would silently
     render in Mukta instead of falling through to Montserrat.
     Devanagari is unaffected by this ordering: no Latin face has
     Devanagari glyphs, so Devanagari always falls through to the
     first available Devanagari face regardless of its position.

     Latin:      Preference 1 → 2 → 3
     Devanagari: Preference 1 → 2 → 3
     ------------------------------------------------------------ */
  --vij-font-heading:
      /* Latin */      'Instrument Serif', 'Playfair Display', Georgia, 'Times New Roman',
      /* Devanagari */ 'Tiro Devanagari Marathi', 'Nirmala UI', 'Mangal',
      serif;

  --vij-font-body:
      /* Latin */      'Instrument Sans', 'Montserrat', Arial, Helvetica, Verdana,
      /* Devanagari */ 'Mukta', 'Kohinoor Devanagari', 'Devanagari Sangam MN',
      sans-serif;

  /* Script-locked stacks — use when you must force a face
     (e.g. a Marathi heading that should not borrow Latin metrics). */
  --vij-font-heading-mr: 'Tiro Devanagari Marathi', 'Nirmala UI', 'Mangal', serif;
  --vij-font-body-mr:    'Mukta', 'Kohinoor Devanagari', 'Devanagari Sangam MN', sans-serif;

  --vij-font-num: var(--vij-font-heading);

  /* ---- Scale (print-first, A4) ---- */
  --vij-size-display: 40pt;
  --vij-size-h1:      26pt;
  --vij-size-h2:      15pt;
  --vij-size-h3:      11.5pt;
  --vij-size-body:    10.5pt;
  --vij-size-small:   9pt;
  --vij-size-micro:   7.5pt;

  --vij-leading-tight: 1.12;
  --vij-leading-head:  1.22;
  --vij-leading-body:  1.55;
  --vij-leading-deva:  1.75;   /* Devanagari needs more air */

  --vij-track-eyebrow: 0.14em;

  /* ---- Space ---- */
  --vij-space-1: 3pt;
  --vij-space-2: 6pt;
  --vij-space-3: 10pt;
  --vij-space-4: 16pt;
  --vij-space-5: 24pt;
  --vij-space-6: 34pt;

  --vij-radius: 4pt;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--vij-bg);
  color: var(--vij-text);
  font-family: var(--vij-font-body);
  font-size: var(--vij-size-body);
  line-height: var(--vij-leading-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .vij-display {
  font-family: var(--vij-font-heading);
  color: var(--vij-text);
  font-weight: 400;          /* Instrument Serif has one weight — never fake-bold it */
  line-height: var(--vij-leading-head);
  margin: 0 0 var(--vij-space-2);
  letter-spacing: -0.005em;
}

.vij-display { font-size: var(--vij-size-display); line-height: var(--vij-leading-tight); }
h1 { font-size: var(--vij-size-h1); line-height: var(--vij-leading-tight); }
h2 { font-size: var(--vij-size-h2); margin-top: var(--vij-space-5); }
h3 { font-size: var(--vij-size-h3); margin-top: var(--vij-space-4); }

h2 + p, h3 + p { margin-top: 0; }

p { margin: 0 0 var(--vij-space-3); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; color: var(--vij-text); }
em, i { font-style: italic; }

a {
  color: var(--vij-primary);
  text-decoration-color: var(--vij-contrast);
  text-underline-offset: 2px;
}

ul, ol { margin: 0 0 var(--vij-space-3); padding-left: var(--vij-space-4); }
li { margin-bottom: var(--vij-space-1); }
li::marker { color: var(--vij-contrast); }

small, .vij-small { font-size: var(--vij-size-small); }

/* ============================================================
   LAYOUT
   ============================================================ */
.vij-page {
  width: 210mm;
  min-height: 297mm;
  padding: 16mm 16mm 14mm;
  margin: 0 auto;
  background: var(--vij-bg);
  display: flex;
  flex-direction: column;
}

.vij-page + .vij-page { margin-top: 8mm; }

.vij-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--vij-space-4); }
.vij-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vij-space-3); }
/* Pushes what follows to the bottom of the sheet. The min-height guarantees
   a gap even on a full page, where the flex growth collapses to zero. */
.vij-spacer { flex: 1 1 auto; min-height: var(--vij-space-4); }

/* ============================================================
   COMPONENTS
   ============================================================ */

/* Eyebrow — the small tracked label above a title */
.vij-eyebrow {
  font-family: var(--vij-font-body);
  font-size: var(--vij-size-micro);
  font-weight: 600;
  letter-spacing: var(--vij-track-eyebrow);
  text-transform: uppercase;
  color: var(--vij-contrast);
  margin: 0 0 var(--vij-space-2);
}

/* Masthead */
.vij-masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--vij-space-4);
  padding-bottom: var(--vij-space-3);
  border-bottom: 1.5pt solid var(--vij-primary);
  margin-bottom: var(--vij-space-5);
}
.vij-wordmark {
  font-family: var(--vij-font-heading);
  font-size: var(--vij-size-h2);
  color: var(--vij-primary);
  letter-spacing: -0.01em;
}
.vij-masthead-meta {
  font-size: var(--vij-size-micro);
  letter-spacing: var(--vij-track-eyebrow);
  text-transform: uppercase;
  color: var(--vij-text-faint);
}

/* Rules */
.vij-rule       { border: 0; border-top: 0.75pt solid var(--vij-rule); margin: var(--vij-space-4) 0; }
.vij-rule-accent{ border: 0; border-top: 2pt solid var(--vij-contrast); width: 40pt; margin: var(--vij-space-3) 0; }

/* Panel — quiet lavender surface */
.vij-panel {
  background: var(--vij-secondary);
  border-radius: var(--vij-radius);
  padding: var(--vij-space-4);
}

/* Callout — panel with an accent spine, for the one thing that matters */
.vij-callout {
  background: var(--vij-secondary);
  border-left: 3pt solid var(--vij-contrast);
  border-radius: 0 var(--vij-radius) var(--vij-radius) 0;
  padding: var(--vij-space-3) var(--vij-space-4);
}

/* Inverted block — for the closing statement / CTA */
.vij-invert {
  background: var(--vij-primary);
  color: var(--vij-on-primary);
  border-radius: var(--vij-radius);
  padding: var(--vij-space-4);
}
/* Everything inside the inverted block must re-assert the light colour:
   the base rules for strong/em/links/muted all set a dark colour and would
   otherwise win here, leaving unreadable dark text on the purple fill. */
.vij-invert h1, .vij-invert h2, .vij-invert h3, .vij-invert .vij-display,
.vij-invert p, .vij-invert li,
.vij-invert strong, .vij-invert b,
.vij-invert em, .vij-invert i,
.vij-invert a { color: var(--vij-on-primary); }
.vij-invert li::marker { color: #E8D5C0; }
.vij-invert .vij-eyebrow { color: #E8D5C0; }
/* Class doubled deliberately — `.vij-bilingual .vij-mr` sits later in this
   file at equal specificity and would otherwise win the tie. */
.vij-invert.vij-invert .vij-muted,
.vij-invert.vij-invert .vij-mr { color: rgba(253, 252, 253, 0.80); }

/* Numbered item — the "nine checks" pattern */
.vij-item { display: grid; grid-template-columns: 22pt 1fr; gap: var(--vij-space-3); margin-bottom: var(--vij-space-4); }
.vij-item-num {
  font-family: var(--vij-font-num);
  font-size: var(--vij-size-h2);
  line-height: 1;
  color: var(--vij-contrast);
}
.vij-item h3 { margin-top: 0; }

/* Stat / score */
.vij-stat { text-align: center; padding: var(--vij-space-3); }
.vij-stat-value {
  font-family: var(--vij-font-num);
  font-size: var(--vij-size-display);
  line-height: 1;
  color: var(--vij-primary);
  display: block;
}
.vij-stat-label {
  font-size: var(--vij-size-micro);
  letter-spacing: var(--vij-track-eyebrow);
  text-transform: uppercase;
  color: var(--vij-text-muted);
  display: block;
  margin-top: var(--vij-space-2);
}

/* Grade badge */
.vij-grade {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48pt; height: 48pt;
  border-radius: 50%;
  background: var(--vij-primary);
  color: var(--vij-on-primary);
  font-family: var(--vij-font-num);
  font-size: 28pt;
  line-height: 1;
}

/* Table */
.vij-table { width: 100%; border-collapse: collapse; font-size: var(--vij-size-small); }
.vij-table th {
  text-align: left;
  font-family: var(--vij-font-body);
  font-size: var(--vij-size-micro);
  font-weight: 600;
  letter-spacing: var(--vij-track-eyebrow);
  text-transform: uppercase;
  color: var(--vij-text-muted);
  padding: var(--vij-space-2) var(--vij-space-3);
  border-bottom: 1pt solid var(--vij-rule-strong);
}
.vij-table td {
  padding: var(--vij-space-2) var(--vij-space-3);
  border-bottom: 0.5pt solid var(--vij-rule);
  vertical-align: top;
}
.vij-table tbody tr:nth-child(odd) { background: var(--vij-secondary); }
.vij-table .vij-num { font-family: var(--vij-font-num); text-align: right; white-space: nowrap; }

/* Footer */
.vij-footer {
  margin-top: var(--vij-space-5);
  padding-top: var(--vij-space-3);
  border-top: 0.75pt solid var(--vij-rule);
  font-size: var(--vij-size-micro);
  color: var(--vij-text-faint);
  display: flex;
  justify-content: space-between;
  gap: var(--vij-space-3);
}

/* ============================================================
   MARATHI / DEVANAGARI
   Apply .vij-mr to any element containing Devanagari. It adds
   the leading Devanagari needs and nudges the optical size.
   ============================================================ */
.vij-mr {
  font-family: var(--vij-font-body-mr);
  line-height: var(--vij-leading-deva);
  font-size: 1.04em;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
h1.vij-mr, h2.vij-mr, h3.vij-mr, .vij-display.vij-mr {
  font-family: var(--vij-font-heading-mr);
  line-height: 1.4;
}

/* Bilingual pair — English lead, Marathi echo beneath */
.vij-bilingual .vij-mr {
  display: block;
  margin-top: var(--vij-space-2);
  color: var(--vij-text-muted);
  font-style: italic;
}

/* ============================================================
   HELPERS
   ============================================================ */
.vij-muted    { color: var(--vij-text-muted); }
.vij-accent   { color: var(--vij-contrast); }
.vij-brand    { color: var(--vij-primary); }
.vij-center   { text-align: center; }
.vij-nobreak  { break-inside: avoid; page-break-inside: avoid; }

/* ============================================================
   PRINT
   ============================================================ */
@page { size: A4; margin: 0; }

@media print {
  body { background: #fff; }
  .vij-page { margin: 0; padding: 16mm 16mm 14mm; break-after: page; }
  .vij-page:last-child { break-after: auto; }
  h1, h2, h3, .vij-item, .vij-callout, .vij-panel, .vij-invert, .vij-stat { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { text-decoration: none; color: var(--vij-primary); }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   SCREEN
   ============================================================ */
@media screen {
  body { padding: 24px 0; background: #EEEAF3; }
  .vij-page { box-shadow: 0 2px 24px rgba(21, 13, 43, 0.10); }
}