/* ==========================================================================
   Hogan Stakes UK — Design Tokens
   Single source of truth for all brand colour, typography, spacing, and UI values.
   Import in root layout. Reference these tokens throughout — do not hardcode values.
   ========================================================================== */

:root {
  /* ---- Primary Colours ---- */
  --color-primary-yellow: #FFB800;
  --color-primary-yellow-hover: #E5A600;
  --color-primary-black: #000000;
  --color-white: #FFFFFF;

  /* ---- Neutral Colours ---- */
  --color-light-gray: #F8F8F8;
  --color-dark-gray: #1A1A1A;
  --color-medium-gray: #555555;
  --color-border-gray: #E0E0E0;
  --color-text: #222222;

  /* ---- Typography ---- */
  --font-family-base: Arial, Helvetica, system-ui, sans-serif;

  --font-size-eyebrow: 0.75rem;   /* 12px — eyebrow labels */
  --font-size-sm: 0.875rem;       /* 14px — small text, labels */
  --font-size-base: 1rem;         /* 16px — body text */
  --font-size-lg: 1.125rem;       /* 18px — large body */
  --font-size-xl: 1.25rem;        /* 20px */
  --font-size-2xl: 1.5rem;        /* 24px */
  --font-size-3xl: 2rem;          /* 32px — section headlines */
  --font-size-4xl: 2.5rem;        /* 40px — page headlines */

  /* ---- Spacing Scale ---- */
  --spacing-xs: 0.5rem;           /* 8px */
  --spacing-sm: 1rem;             /* 16px */
  --spacing-md: 1.5rem;           /* 24px */
  --spacing-lg: 2rem;             /* 32px */
  --spacing-xl: 3rem;             /* 48px */
  --spacing-2xl: 4.5rem;          /* 72px — section vertical padding */
  --spacing-3xl: 5rem;            /* 80px — section horizontal padding */

  /* ---- Border Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);

  /* ---- Layout ---- */
  --nav-height: 80px;
  --section-padding-desktop: 72px 80px;
  --section-padding-mobile: 48px 24px;

  /* ---- Status Badge Colours ---- */
  --status-in-stock-bg: #E8F5E9;
  --status-in-stock-text: #2E7D32;
  --status-coming-soon-bg: #F5F5F5;
  --status-coming-soon-text: #757575;
  --status-limited-stock-bg: #FFF3E0;
  --status-limited-stock-text: #E65100;
  --status-made-to-order-bg: #E3F2FD;
  --status-made-to-order-text: #1565C0;
}