/* ============================================================
   VyaparCred — Design Tokens  (v3)
   Piktochart "Green Abyss" palette:
   #0B3D0B · #2E8B57 · #4F9F4F · #1F1F1F · #D1E7D1
   Clean neutral grounds · sea-green accent · rich black sections.
   ============================================================ */

:root {
  /* ---- The greens (Green Abyss) ---- */
  --green:        #2E8B57;   /* primary — sea green */
  --green-deep:   #226E44;   /* hover / pressed */
  --green-ink:    #0B3D0B;   /* darkest green for text on light */
  --green-bright: #4F9F4F;   /* lighter green — on-dark accent */
  --green-soft:   #D1E7D1;   /* tint fill */
  --green-soft-2: #BBD9BB;

  /* ---- Black (dark sections) ---- */
  --forest:    #1F1F1F;
  --forest-2:  #141414;
  --forest-3:  #2B2B2B;      /* raised surface on dark */

  /* ---- Neutrals (clean near-white grounds) ---- */
  --cream:  #F6F6F4;         /* main background */
  --paper:  #ECEEEA;         /* deeper neutral panel */
  --white:  #FFFFFF;         /* cards */

  --ink:    #1A1A1A;         /* near-black text */
  --ink-2:  #3A413C;         /* body secondary */
  --gray:   #5C645E;         /* muted */
  --gray-2: #8E948F;         /* faint labels */

  --line:   #E3E4E0;         /* hairline */
  --line-2: #D3D5D0;         /* stronger rule */

  /* on dark */
  --on-dark:        #F0F2EF;
  --on-dark-muted:  #A6ACA7;
  --on-dark-line:   rgba(255,255,255,.12);

  /* ---- System colours (used sparingly) ---- */
  --positive: #2E8B57;
  --caution:  #B6862A;       /* amber — countdowns / "closes in" only */
  --caution-soft: #F1E9D2;
  --negative: #B14438;

  /* minitag tints */
  --tag-cool-bg: var(--green-soft);
  --tag-cool-fg: var(--green-ink);
  --tag-warm-bg: var(--caution-soft);
  --tag-warm-fg: #8A6418;
  --tag-khaki-bg: #E8E9E2;
  --tag-khaki-fg: #62684C;

  /* ---- Typography ---- */
  --font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-eyebrow: .74rem;
  --fs-body:    1.0625rem;
  --fs-lede:    1.125rem;
  --fs-h3:      1.3rem;
  --fs-h2:      clamp(1.75rem, 1rem + 2.1vw, 2.55rem);
  --fs-h1:      clamp(2.2rem, 1.1rem + 2.9vw, 3.25rem);

  /* ---- Spacing ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 14px; --sp-4: 22px;
  --sp-5: 34px; --sp-6: 52px; --sp-7: 78px; --sp-8: 112px;
  --sp-9: 140px; --sp-10: 176px;

  --wrap:   1240px;
  --gutter: clamp(20px, 4vw, 44px);

  /* ---- Radii (sharp / editorial) ---- */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ---- Shadows (neutral, restrained — lean on 1px rules) ---- */
  --sh-xs: 0 1px 2px rgba(20,20,20,.05);
  --sh-sm: 0 2px 10px -4px rgba(20,20,20,.10);
  --sh-md: 0 14px 34px -18px rgba(20,20,20,.22);
  --sh-lg: 0 30px 60px -28px rgba(11,61,11,.30);

  /* hairline eyebrow lead */
  --eyebrow-line: 26px;

  --ease: cubic-bezier(.22,.61,.36,1);
}