/* ==========================================================================
   V&G Group — Design Tokens
   Single source of truth for brand colors, typography, and spacing.
   Every page on vggroupnj.com should reference these variables —
   never hard-code hex values or font names directly in page styles.
   ========================================================================== */

:root {
  /* ----- Brand colors (extracted from official logo SVGs) ----- */
  --vg-navy: #020c45;        /* primary brand color — logo ink */
  --vg-white: #ffffff;       /* logo reverse / page background */

  /* Supporting neutrals derived from the navy for UI use */
  --vg-navy-90: #1b2458;     /* hover states on navy elements */
  --vg-navy-10: #e6e7ee;     /* subtle tinted backgrounds, dividers */
  --vg-ink: #10142b;         /* long-form body text (softer than pure navy) */
  --vg-gray: #5a5f73;        /* secondary text, captions */
  --vg-off-white: #f8f8f6;   /* alternate section background */

  /* ----- Semantic aliases (use these in components) ----- */
  --color-primary: var(--vg-navy);
  --color-on-primary: var(--vg-white);
  --color-bg: var(--vg-white);
  --color-bg-alt: var(--vg-off-white);
  --color-text: var(--vg-ink);
  --color-text-muted: var(--vg-gray);
  --color-border: var(--vg-navy-10);

  /* ----- Typography ----- */
  /* Cinzel is the official brand font (per implementation plan) — it is a
     titling face whose lowercase renders as small caps, matching the logo.
     Cormorant Garamond supplies true italics (pull-quotes) and readable
     text for form fields, since Cinzel has no italic or true lowercase. */
  --font-heading: "Cinzel", "Times New Roman", serif;
  --font-body: "Cinzel", "Times New Roman", serif;
  --font-accent: "Cormorant Garamond", Georgia, serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  --tracking-caps: 0.08em;   /* letterspacing for small-caps headings, à la logo */

  /* ----- Spacing scale ----- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  /* ----- Misc ----- */
  --radius: 2px;             /* brand look is sharp/rectilinear (boxed monogram) */
  --max-width: 72rem;
}