/* ==========================================================================
   WEBBIZORA — DESIGN TOKENS
   Single source of truth for color, type and spacing.
   ========================================================================== */

:root {
  /* Color */
  --wb-primary-dark:   #071411;
  --wb-deep-dark:       #04100D;
  --wb-green:           #00B85A;
  --wb-green-bright:    #14D46C;
  --wb-green-deep:      #12382B;
  --wb-green-soft:      #EAF9F0;
  --wb-off-white:       #F8FAF9;
  --wb-white:           #FFFFFF;
  --wb-text:            #111A17;
  --wb-text-muted:      #66736D;
  --wb-border:          #E2EAE6;

  /* On-dark variants */
  --wb-text-on-dark:        #F8FAF9;
  --wb-text-on-dark-muted:  #9FB0A9;
  --wb-border-on-dark:      rgba(248, 250, 249, 0.12);

  /* Type */
  --wb-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
  --wb-font-body:    'Inter', -apple-system, sans-serif;

  --wb-h1: clamp(2.375rem, 1.7rem + 2.7vw, 4.25rem);   /* 38px -> 68px */
  --wb-h2: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);        /* 32px -> 44px */
  --wb-h3: clamp(1.125rem, 1.02rem + 0.4vw, 1.5rem);    /* 18px -> 24px */
  --wb-body: clamp(1rem, 0.97rem + 0.1vw, 1.125rem);    /* 16px -> 18px */

  /* Spacing scale */
  --wb-s-4: 0.25rem;
  --wb-s-8: 0.5rem;
  --wb-s-12: 0.75rem;
  --wb-s-16: 1rem;
  --wb-s-24: 1.5rem;
  --wb-s-32: 2rem;
  --wb-s-48: 3rem;
  --wb-s-64: 4rem;
  --wb-s-80: 5rem;
  --wb-s-96: 6rem;

  /* Layout */
  --wb-max-width: 1240px;
  --wb-radius-sm: 8px;
  --wb-radius-md: 14px;
  --wb-radius-lg: 20px;

  /* Motion */
  --wb-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wb-fast: 150ms;
  --wb-base: 220ms;

  /* Shadow — used sparingly */
  --wb-shadow-sm: 0 1px 2px rgba(4, 16, 13, 0.06);
  --wb-shadow-md: 0 8px 24px rgba(4, 16, 13, 0.10);
  --wb-shadow-lg: 0 24px 64px rgba(4, 16, 13, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wb-fast: 0ms;
    --wb-base: 0ms;
  }
}