/* ==========================================================================
   Vyapar Growth – Design Tokens
   Single source of truth for colour, type, spacing, radii, motion, layout.
   Change values here; nothing else in the theme hard-codes them.
   ========================================================================== */

:root {
  /* ---- Colour: brand ---- */
  --vg-green:        #00BF63;
  --vg-green-dark:   #009A50;   /* hover / on light backgrounds for AA text */
  --vg-green-deep:   #0B7A44;   /* text-on-white that passes AA (4.5:1) */
  --vg-green-tint:   #E3F7EC;
  --vg-yellow:       #FFCC00;
  --vg-yellow-tint:  #FFF3B8;
  --vg-black:        #000000;

  /* ---- Colour: neutrals ---- */
  --vg-offwhite:     #F7F7F2;
  --vg-grey-100:     #EDEDE8;
  --vg-grey-200:     #DDDDD6;
  --vg-grey-300:     #C4C4BC;
  --vg-grey-500:     #6B6B6B;
  --vg-grey-700:     #3A3A3A;
  --vg-grey-900:     #181818;
  --vg-white:        #FFFFFF;

  /* ---- Semantic ---- */
  --vg-bg:           var(--vg-offwhite);
  --vg-bg-alt:       var(--vg-white);
  --vg-bg-muted:     var(--vg-grey-100);
  --vg-bg-dark:      var(--vg-black);
  --vg-bg-dark-alt:  var(--vg-grey-900);
  --vg-text:         var(--vg-black);
  --vg-text-muted:   var(--vg-grey-500);
  --vg-text-on-dark: var(--vg-offwhite);
  --vg-text-on-dark-muted: #A8A8A2;
  --vg-line:         var(--vg-grey-200);
  --vg-line-strong:  var(--vg-black);
  --vg-line-on-dark: #2E2E2E;
  --vg-accent:       var(--vg-green);
  --vg-accent-text:  var(--vg-green-deep);
  --vg-highlight:    var(--vg-yellow);
  --vg-focus:        var(--vg-yellow);
  --vg-error:        #C8102E;
  --vg-success:      var(--vg-green-deep);

  /* ---- Typography ---- */
  --vg-font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vg-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vg-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale: min at 320px → max at 1440px */
  --vg-text-xs:   0.75rem;
  --vg-text-sm:   0.875rem;
  --vg-text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --vg-text-md:   clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --vg-text-lg:   clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --vg-text-xl:   clamp(1.5rem, 1.25rem + 1.2vw, 2.25rem);     /* h3 / statements */
  --vg-text-2xl:  clamp(1.875rem, 1.4rem + 2.2vw, 3.25rem);    /* h2 */
  --vg-text-3xl:  clamp(2.375rem, 1.6rem + 3.6vw, 4.75rem);    /* h1 hero */
  --vg-text-4xl:  clamp(3rem, 1.8rem + 6vw, 7rem);             /* display numbers / statements */

  --vg-leading-tight: 1.02;
  --vg-leading-snug:  1.15;
  --vg-leading-base:  1.6;
  --vg-tracking-tight: -0.02em;
  --vg-tracking-caps:  0.08em;

  /* ---- Spacing (4px base) ---- */
  --vg-space-1:  0.25rem;
  --vg-space-2:  0.5rem;
  --vg-space-3:  0.75rem;
  --vg-space-4:  1rem;
  --vg-space-5:  1.5rem;
  --vg-space-6:  2rem;
  --vg-space-7:  3rem;
  --vg-space-8:  4rem;
  --vg-space-9:  6rem;
  --vg-space-10: 8rem;

  /* Section rhythm – fluid */
  --vg-section:      clamp(4rem, 3rem + 5vw, 8rem);
  --vg-section-sm:   clamp(2.5rem, 2rem + 3vw, 5rem);

  /* ---- Layout ---- */
  --vg-container:       1320px;
  --vg-container-wide:  1520px;
  --vg-container-text:  760px;
  --vg-gutter:          clamp(1.25rem, 1rem + 2vw, 3rem);
  --vg-gap:             clamp(1rem, 0.75rem + 1.5vw, 2rem);
  --vg-header-h:        72px;

  /* ---- Borders / radii ---- */
  --vg-border:       1px solid var(--vg-line);
  --vg-border-strong: 1px solid var(--vg-line-strong);
  --vg-radius-xs:    2px;
  --vg-radius-sm:    4px;
  --vg-radius-md:    8px;
  --vg-radius-pill:  999px;

  /* ---- Shadows (used sparingly) ---- */
  --vg-shadow-sm:    0 1px 2px rgba(0,0,0,.06);
  --vg-shadow-md:    0 8px 24px -12px rgba(0,0,0,.25);
  --vg-shadow-menu:  0 24px 48px -24px rgba(0,0,0,.35);

  /* ---- Motion ---- */
  --vg-ease:         cubic-bezier(.22,.61,.36,1);
  --vg-ease-out:     cubic-bezier(.16,1,.3,1);
  --vg-dur-fast:     160ms;
  --vg-dur:          280ms;
  --vg-dur-slow:     600ms;
  --vg-reveal-y:     18px;

  /* ---- Z-index ---- */
  --vg-z-header:  100;
  --vg-z-menu:    110;
  --vg-z-overlay: 120;

  /* ---- Breakpoints (reference; CSS cannot read these in media queries) ----
     sm: 480px · md: 768px · lg: 1024px · xl: 1280px · 2xl: 1536px */
}

/* Dark surfaces re-map semantic tokens so components adapt automatically. */
.vg-dark,
.vg-section--dark {
  --vg-bg:          var(--vg-black);
  --vg-bg-alt:      var(--vg-grey-900);
  --vg-bg-muted:    var(--vg-grey-900);
  --vg-text:        var(--vg-offwhite);
  --vg-text-muted:  var(--vg-text-on-dark-muted);
  --vg-line:        var(--vg-line-on-dark);
  --vg-line-strong: var(--vg-offwhite);
  --vg-accent-text: var(--vg-green);
  color: var(--vg-text);
  background: var(--vg-bg);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --vg-dur-fast: 0ms;
    --vg-dur: 0ms;
    --vg-dur-slow: 0ms;
    --vg-reveal-y: 0px;
  }
}