/* =========================================================
   VAWZEN GROUP LTD — DESIGN TOKENS
   Single source of truth for colour, type, spacing, motion.
   Future admin theming (Laravel) should override these
   custom properties rather than touching component CSS.
   ========================================================= */

:root {
  /* ---- Colour: minimal, high-trust palette ---- */
  --vg-ink:        #0B0D12; /* primary text / dark section bg — near-black, neutral */
  --vg-ink-soft:   #171A21; /* secondary dark surface (cards on ink) */
  --vg-paper:      #FFFFFF; /* page background — clean white */
  --vg-surface:    #F5F6F8; /* subtle alternate section background */
  --vg-white:      #FFFFFF;
  --vg-brass:      #4F46E5; /* primary action / accent — indigo, used sparingly */
  --vg-brass-dark: #3F37C9; /* hover state for accent */
  --vg-teal:       #333B47; /* secondary tag colour — neutral charcoal, not decorative */
  --vg-teal-soft:  #F0F1F4; /* neutral chip background */
  --vg-slate:      #667085; /* secondary / muted text */
  --vg-slate-40:   rgba(102, 112, 133, 0.4);
  --vg-line:       #E4E7EC; /* hairline borders/dividers */
  --vg-line-dark:  rgba(255,255,255,0.12); /* dividers on ink bg */
  --vg-error:      #C0362C;
  --vg-success:    #16794E;

  /* ---- Typography: one clean sans, weight does the work ---- */
  --vg-font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vg-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vg-font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --vg-fs-h1: clamp(2.5rem, 4.6vw, 4rem);
  --vg-fs-h2: clamp(1.8rem, 3vw, 2.6rem);
  --vg-fs-h3: clamp(1.25rem, 1.8vw, 1.5rem);
  --vg-fs-lead: clamp(1.05rem, 1.3vw, 1.2rem);
  --vg-fs-body: 1rem;
  --vg-fs-small: 0.875rem;
  --vg-fs-micro: 0.75rem;

  --vg-lh-tight: 1.08;
  --vg-lh-heading: 1.15;
  --vg-lh-body: 1.6;

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

  /* ---- Layout ---- */
  --vg-container: 1200px;
  --vg-container-narrow: 760px;
  --vg-radius-sm: 4px;
  --vg-radius-md: 8px;
  --vg-radius-lg: 16px;

  /* ---- Motion ---- */
  --vg-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --vg-speed-fast: 150ms;
  --vg-speed-base: 280ms;
  --vg-speed-slow: 500ms;

  /* ---- Shadow ---- */
  --vg-shadow-sm: 0 1px 2px rgba(16, 25, 43, 0.06);
  --vg-shadow-md: 0 8px 24px rgba(16, 25, 43, 0.08);
  --vg-shadow-lg: 0 20px 48px rgba(16, 25, 43, 0.14);
}

/*
  FUTURE-PROOFING NOTE (Laravel/MySQL upgrade path):
  These tokens map 1:1 to a future `site_settings` / `theme_config`
  table (key/value: vg_ink, vg_brass, vg_teal, etc.) so an admin
  panel can repaint the whole site without touching markup.
  Typography + spacing scale map to `theme_typography` and
  `theme_spacing` tables for the same reason.
  (Variable names like --vg-brass/--vg-teal are historical —
  they now hold the blue accent / neutral charcoal values.)
*/

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}