/* Shri Modi public-site design system. Edit shared values here. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap');

:root {
  /* Brand and surface colours */
  --color-brand: #ee1c25;
  --color-brand-dark: #c9141c;
  --color-highlight: #ffe566;
  --color-gold: #d2ac67;
  --color-charcoal: #242424;
  --color-heading: #242424;
  --color-text: #4b4b4b;
  --color-muted: #747875;
  --color-caption: #777;
  --color-lead: #5d625f;
  --color-white: #fff;
  --color-ivory: #fbf8f2;
  --color-mineral: #f3ebdd;
  --color-mist: #f3efe8;
  --color-red-soft: #fff1f2;
  --color-gold-soft: #fbf5e9;
  --color-border: #d8ccba;
  --color-divider: #d9d0c3;
  --color-dark: #151718;
  --color-dark-deep: #0e1011;
  --color-dark-text: #c9cecb;
  --color-near-black: #111;
  --color-dark-charcoal: #282828;

  /* Type scale */
  --font-body: 'Inter', Arial, sans-serif;
  --font-heading: 'Oswald', Arial, sans-serif;
  --text-size: 16px;
  --text-line-height: 1.7;
  --lead-size: 18px;
  --lead-line-height: 1.8;
  --heading-line-height: 1.12;
  --heading-weight: 600;
  --heading-bottom-space: .48em;
  --h1-size: clamp(48px, 5.5vw, 76px);
  --h2-size: clamp(38px, 4.2vw, 58px);
  --h3-size: clamp(28px, 2.7vw, 38px);
  --h4-size: 28px;
  --h5-size: 22px;
  --h6-size: 18px;
  --paragraph-bottom-space: 1.1em;

  /* Vertical rhythm: one value per viewport size */
  --section-space-desktop: 124px;
  --section-space-tablet: 88px;
  --section-space-mobile: 64px;
  --section-space: var(--section-space-desktop);
  --section-space-sm: 82px;

  /* Existing component aliases. Keep these mapped to the palette above. */
  --brand: var(--color-brand);
  --brand-dark: var(--color-brand-dark);
  --highlight-hover: var(--color-highlight);
  --gold: var(--color-gold);
  --charcoal: var(--color-charcoal);
  --ink: var(--color-heading);
  --body: var(--color-text);
  --text: var(--color-text);
  --muted: var(--color-muted);
  --white: var(--color-white);
  --ivory: var(--color-ivory);
  --mineral: var(--color-mineral);
  --mineral-mist: var(--color-mist);
  --kaolin-sand: var(--color-border);
  --soft: var(--color-mist);
  --red-soft: var(--color-red-soft);
  --gold-soft: var(--color-gold-soft);
  --border: var(--color-border);
  --deep: var(--color-dark);
  --deep2: var(--color-dark-deep);
  --section-gap: var(--section-space-desktop);
  --section-gap-tablet: var(--section-space-tablet);
  --section-gap-mobile: var(--section-space-mobile);
  --max: 1240px;
  --radius: 18px;
  --shadow: 0 18px 48px rgba(22,22,22,.08);
  --shadow-sm: 0 10px 28px rgba(22,22,22,.06);
}

/* Shared typography */
body { margin: 0; background: var(--color-white); color: var(--color-text); font: var(--text-size)/var(--text-line-height) var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--color-heading); margin: 0 0 var(--heading-bottom-space); font-weight: var(--heading-weight); line-height: var(--heading-line-height); letter-spacing: -.015em; }
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); letter-spacing: .01em; }
p { margin: 0 0 var(--paragraph-bottom-space); text-align: justify; text-align-last: left; }
.lead { font-size: var(--lead-size); line-height: var(--lead-line-height); color: var(--color-lead); }
.muted { color: var(--color-muted); }
.small { font-size: 13px; }

/* All normal sections use the same responsive vertical space. */
.section { padding-block: var(--section-space); }
.section-sm { padding-block: var(--section-space-sm); }
.section-gap-top-0 { padding-top: 0 !important; }
.section-gap-bottom-0 { padding-bottom: 0 !important; }
.section-white { background: var(--color-white); }
.section-ivory { background: var(--color-ivory); }
.section-mineral { background: var(--color-mineral); }
.section-soft-grey { background: var(--color-mist); }
.section-red-soft { background: var(--color-red-soft); }
.section-gold-soft { background: var(--color-gold-soft); }
.section-dark { background: var(--color-dark); color: var(--color-white); }
.section-dark :is(h1,h2,h3,h4,h5,h6) { color: var(--color-white); }
.section-dark :is(.lead,.muted) { color: var(--color-dark-text); }
.section-brand { background: var(--color-brand); color: var(--color-white); }
.section-brand :is(h1,h2,h3,h4,h5,h6) { color: var(--color-white); }
.section-brand .lead { color: var(--color-red-soft); }
.section-accent-top { border-top: 4px solid var(--color-brand); }
.section-accent-gold { border-color: var(--color-gold) !important; }

@media (max-width: 1000px) { :root { --section-space: var(--section-space-tablet); } }
@media (max-width: 640px) { :root { --section-space: var(--section-space-mobile); --section-space-sm: 52px; } }