/* ===================================
   CSS VARIABLES — YCF Website
   Design tokens from Style_Guide.md
   =================================== */

:root {
  /* ── Colours ── */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-dark: #252525;

  --color-text-body: #666666;
  --color-text-light: #999999;
  --color-border: rgba(0, 0, 0, 0.1);

  /* Accent — Mint teal (from ALNF reference) */
  --color-accent: #ABDADE;
  --color-accent-hover: #8fcdd2;

  /* Section backgrounds */
  --color-cream: #F1ECE5;
  --color-cta-bg: #C6BBE3;

  /* Overlays */
  --color-overlay: rgba(0, 0, 0, 0.45);
  --color-overlay-dark: rgba(0, 0, 0, 0.8);

  /* ── Typography ── */
  --font-heading: 'DM Serif Display', 'Georgia', serif;
  --font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ── Spacing ── */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* ── Layout ── */
  --container-max: 1200px;
  --container-padding: 40px;
  --nav-height: 72px;

  /* ── Borders ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 50px;

  /* ── Transitions ── */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
}