:root {
  /* TechyGuide Brand Tokens */
  --brand-beer: #E28716;        /* Beer */
  --brand-pine: #008273;        /* Pine Green */
  --brand-navy: #0C2340;        /* Navy Blue */
  --brand-offwhite: #F8F9FA;    /* Off White */
  --brand-softgrey: #EAEAEA;    /* Soft Grey */
  --brand-charcoal: #333333;    /* Charcoal */
  --brand-teal-tint: #00A693;   /* Teal Tint */
  --brand-coral: #FF7043;       /* Coral Orange */

  /* Project-wide variables mapped to brand */
  --primary: var(--brand-navy);
  --secondary: var(--brand-pine);
  --merwin: var(--brand-beer); /* used by gradients in main.css */
  --accent: var(--brand-pine); /* buttons, highlights, accents */
  --warning: var(--brand-coral);
  --success: var(--brand-teal-tint);
  --light: var(--brand-offwhite);
  --gray: var(--brand-softgrey);
  --dark: var(--brand-charcoal);

  /* Recommended brand gradient (CTA/banners) */
  --gradient: linear-gradient(135deg, var(--brand-pine) 0%, var(--brand-beer) 100%);

  /* Fixed header height used for layout offsets */
  --header-height: 70px;

  /* Common UI tokens */
  --card-bg: rgba(255, 255, 255, 0.95);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  --transition: all 0.3s ease;
}