/* -----------------------------------------------------------------------------
   YCG brand tokens - single source of truth.
   Kept in sync with YCG.Core/Infrastructure/BrandTokens.cs. If you change a
   value here, update the C# constants and vice versa.
   ----------------------------------------------------------------------------- */
:root {
  /* Colours */
  --ycg-red: #e2161a;
  --ycg-red-hover: #c0100f;
  --ycg-navy: #262e44;
  --ycg-black: #000000;
  --ycg-white: #ffffff;

  --ycg-text-default: #000000;
  --ycg-text-secondary: #5c6668;
  --ycg-text-inverse: #ffffff;

  --ycg-surface-light: #f0f0f0;
  --ycg-surface-lighter: #f1f1f1;
  --ycg-surface-muted: #f2f2f2;

  /* Hero gradient (green) fallback if no image */
  --ycg-hero-gradient: linear-gradient(135deg, #2d5a1b 0%, #3a7a25 30%, #4a9630 55%, #5ab038 75%, #6dc040 100%);

  /* Fonts */
  --ycg-font-heading: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --ycg-font-body: 'Raleway', 'Segoe UI', Arial, sans-serif;
  --ycg-font-meta: 'Inter', 'Segoe UI', Arial, sans-serif;

  /* Type scale (from Figma) */
  --ycg-h1: 44px;
  --ycg-h2: 28px;
  --ycg-h3: 22px;
  --ycg-body: 16px;
  --ycg-body-lg: 26px;
  --ycg-small: 14px;
  --ycg-xsmall: 12px;

  /* Radii */
  --ycg-radius-button: 3px;
  --ycg-radius-card: 8px;
  --ycg-radius-card-lg: 10px;
  --ycg-radius-pill: 5.808px;

  /* Layout */
  --ycg-content-max: 1200px;
  --ycg-content-narrow: 1000px;
  --ycg-content-wide: 1400px;

  /* Shadows */
  --ycg-shadow-card: 0 4px 8px rgba(0,0,0,0.25);
  --ycg-shadow-dropdown: 0 8px 32px rgba(0,0,0,0.5);
}