/* ==========================================================
   LAYER 3 · DESIGN TOKENS
   Every colour, font, size and spacing value lives here.
   Change a token once and it updates the whole site.
   ========================================================== */
:root {
  /* ---- Brand colours (green sampled from the Jivanurja logo: #1B5B01) ---- */
  --green-950: #0c2a02;
  --green-900: #123e03;
  --green-800: #174d05;   /* main section band (hero, research, steps, journey, footer) */
  --green-700: #1b5b01;   /* logo green: headings, primary button */
  --green-600: #2e7614;   /* hover / focus */
  --green-500: #4a8f2c;
  --green-200: #cfe3c2;
  --green-100: #e7f1e0;   /* pillar cards, icon chips */
  --green-50:  #f3f8ef;

  --accent:       #d0331f; /* call-to-action red: "Call Now", sticky Call (white text 5:1) */
  --accent-hover: #ad2716;
  --whatsapp:     #0b6e4f; /* sticky WhatsApp (white text 6.3:1) */
  --focus:        #f5b301; /* keyboard focus ring: visible on both green and white */
  --highlight:    #fdf06a; /* yellow badge / reference link highlight */
  --road:         #7a5fa8; /* purple icon tiles in the mini-roadmap */

  /* ---- Semantic aliases: use these in components ---- */
  --brand:        var(--green-700);   /* buttons, links, icons */
  --brand-strong: var(--green-800);   /* headings on light, green bands */
  --heading:      var(--green-800);

  /* ---- Neutrals ---- */
  --white:     #ffffff;
  --ink:       #1e293b;   /* body text */
  --ink-soft:  #334155;
  --muted:     #475569;   /* captions, disclaimers (≥ 6:1 on light backgrounds) */
  --line:      #d4dcd0;   /* borders, dividers */
  --surface:   #f4f7f4;   /* form card */
  --input-bg:  #e3e9e3;
  --grey-band: #e9eeee;   /* impact section */
  --grey-panel:#dcdfe1;
  --subfooter: #ecebeb;
  --dark-panel:#03181a;   /* factors section */
  --glow:      #4fd1c5;
  --error:     #dc2626;

  /* ---- Typography ---- */
  --font-body:    "Montserrat", "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;   /* Mukta covers Marathi (Devanagari) */
  --font-display: var(--font-body);   /* one family site-wide: Montserrat */

  /* Mobile-first sizes; responsive.css raises them on larger screens */
  --fs-hero:  1.75rem;   /* 28px → 35px tablet+ */
  --fs-h2:    1.45rem;   /* section titles: 23px → 26px tablet+ */
  --fs-display: 1.9rem;  /* "Regrow → Restore → Relive" */
  --fs-h3:    1.05rem;
  --fs-body:  1rem;      /* 16px */
  --fs-small: 0.875rem;  /* 14px: secondary text, FAQ answers, captions */
  --fs-tiny:  0.8125rem; /* 13px: smallest text on the site (legal lines) */

  --lh-tight: 1.25;
  --lh-body:  1.6;

  /* ---- Layout widths (proportions taken from the 980px reference canvas) ---- */
  --w-xs: 340px;   /* form, roadmap */
  --w-sm: 470px;   /* partners, videos, research card, impact, journey */
  --w-md: 640px;   /* hero text+image, press grid, steps, FAQ */
  --w-lg: 980px;   /* full content grid */
  --w-hero: 512px; /* hero text + image block (measured from reference) */

  /* Fix 4 · per-section content widths, measured from the 1366px reference
     and divided by 1.394 to get the 980px design-canvas value */
  --w-videos:   500px;  /* 2×2 video grid            (ref 695px @1366) */
  --w-research: 504px;  /* white study card          (ref 702px) */
  --w-pillars:  495px;  /* Regrow→Relive graphic     (ref ~690px) */
  --w-factors:  459px;  /* dark factors panel        (ref ~640px) */
  --w-steps:    594px;  /* 2-column step grid        (ref ~828px) */
  --w-impact:   437px;  /* grey impact panel         (ref 609px) */
  --w-roadmap:  302px;  /* mini-roadmap panel        (ref 421px) */
  --w-journey:  431px;  /* green journey blocks      (ref 601px) */
  --w-faq:      654px;  /* FAQ boxes                 (ref ~912px) */
  --gutter: 16px;

  /* ---- Desktop proportional scaling ----
     The reference scales its 980px design with the viewport (×1.39 at 1366px).
     responsive.css raises this per breakpoint; layout.css applies it as `zoom`
     to content containers only, so full-bleed backgrounds are unaffected. */
  --page-scale: 1;

  /* ---- Spacing scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --section-y: 36px;          /* vertical padding of each section (mobile) */
  --section-y-tight: 24px;

  /* ---- Shape & depth ---- */
  --radius-sm: 4px;
  --radius:    10px;
  --radius-lg: 18px;
  /* The reference cards have a dark "lift" shadow under the bottom edge */
  --shadow-lift: 0 16px 10px -12px rgba(0, 0, 0, .55);
  --shadow-soft: 0 6px 18px rgba(15, 23, 42, .08);
  --ease: .25s ease;
}