/* ==========================================================================
   variables.css — K Group of Companies brand system
   CSS custom properties for color, radius, and shared design tokens.
   ========================================================================== */

:root {
  /* --- Brand colors --- */
  --color-primary: #CC1516;      /* Primary red — brand accent, CTAs */
  --color-charcoal: #1A1A1A;     /* Charcoal — headings, dark surfaces */
  --color-surface: #F7F7F7;      /* Light grey — section backgrounds */
  --color-white: #FFFFFF;        /* White — page background */
  --color-text-muted: #666666;   /* Medium grey — secondary body text */
  --color-whatsapp: #25D366;     /* WhatsApp green — contact affordance */
  --color-border: #E8E8E8;       /* Border grey — dividers, card outlines */

  /* --- Semantic aliases --- */
  --color-bg: var(--color-white);
  --color-text: var(--color-charcoal);
  --color-link: var(--color-primary);
  --color-link-hover: #A81011;   /* Darkened primary for hover states */

  /* --- Border radius --- */
  --radius-card: 8px;
  --radius-button: 6px;

  /* --- Spacing scale --- */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;

  /* --- Layout --- */
  --container-max: 1200px;

  /* --- Elevation --- */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(0, 0, 0, 0.10);

  /* --- Motion --- */
  --transition-base: 0.2s ease;
}