/* ==========================================================================
   Design Tokens — CSS Custom Properties
   Color palette derived from the goose / nature palette:
   Dark Forest Green · Olive Green · Steel Blue · Ice White · Burnt Orange
   ========================================================================== */

:root {
  /* ── Colour Palette ───────────────────────────────────────────────────── */
  --color-green-900: #2E4420;
  --color-green-800: #3D5A2B;
  --color-green-700: #4E6E36;
  --color-green-600: #5F8042;
  --color-green-500: #6E8E50;

  --color-olive-700: #6B7A42;
  --color-olive-600: #7E8D52;
  --color-olive-500: #8B9A5A;
  --color-olive-400: #9DAA72;
  --color-olive-300: #B1BB90;
  --color-olive-200: #CBD2B3;
  --color-olive-100: #E5E9D9;

  --color-blue-600: #7A97B0;
  --color-blue-500: #94ADC0;
  --color-blue-400: #ADBFCE;
  --color-blue-300: #C3D0DB;
  --color-blue-200: #D6DFE7;
  --color-blue-100: #E5EBF0;
  --color-blue-50:  #EEF2F6;

  --color-orange-700: #C0601D;
  --color-orange-600: #D46E24;
  --color-orange-500: #E27A2B;
  --color-orange-400: #E89350;
  --color-orange-300: #EDAB76;
  --color-orange-200: #F4CDA8;
  --color-orange-100: #FAE6D3;

  --color-neutral-900: #1A1A1A;
  --color-neutral-800: #2D2D2D;
  --color-neutral-700: #404040;
  --color-neutral-600: #555555;
  --color-neutral-500: #717171;
  --color-neutral-400: #9A9A9A;
  --color-neutral-300: #C4C4C4;
  --color-neutral-200: #E0E0E0;
  --color-neutral-100: #F0F0F0;
  --color-neutral-50:  #F8F8F8;

  --color-white: #FFFFFF;
  --color-black: #000000;

  /* ── Semantic Colours ─────────────────────────────────────────────────── */
  --color-primary:        var(--color-green-800);
  --color-primary-light:  var(--color-olive-300);
  --color-primary-bg:     var(--color-olive-100);
  --color-secondary:      var(--color-blue-400);
  --color-secondary-bg:   var(--color-blue-50);
  --color-accent:         var(--color-orange-500);
  --color-accent-hover:   var(--color-orange-600);
  --color-accent-light:   var(--color-orange-100);

  --color-text:           var(--color-neutral-800);
  --color-text-muted:     var(--color-neutral-700);
  --color-text-heading:   var(--color-neutral-900);
  --color-text-inverse:   var(--color-white);
  --color-text-accent:    var(--color-orange-500);

  --color-bg:             #FAFAF9;
  --color-bg-card:        var(--color-olive-100);
  --color-bg-alt:         var(--color-blue-50);
  --color-bg-footer:      var(--color-green-800);

  --color-border:         var(--color-neutral-200);
  --color-border-focus:   var(--color-orange-500);

  --color-focus-ring:     rgba(226, 122, 43, 0.6);
  --color-overlay:        rgba(0, 0, 0, 0.5);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --font-family-heading: 'Comfortaa', 'Georgia', serif;
  --font-family-body:    'Comfortaa', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono:    'Consolas', 'Courier New', monospace;

  --font-size-xs:    1rem;      /* 16px */
  --font-size-sm:    1rem;      /* 16px */
  --font-size-base:  1rem;      /* 16px */
  --font-size-md:    1.125rem;  /* 18px */
  --font-size-lg:    1.25rem;   /* 20px */
  --font-size-xl:    1.5rem;    /* 24px */
  --font-size-2xl:   1.875rem;  /* 30px */
  --font-size-3xl:   2.25rem;   /* 36px */
  --font-size-4xl:   3rem;      /* 48px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semi:   600;
  --font-weight-bold:   700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
  --letter-spacing-wider:   0.05em;

  /* ── Spacing Scale ────────────────────────────────────────────────────── */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4px  */
  --space-2:   0.5rem;   /* 8px  */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-8:   2rem;     /* 32px */
  --space-10:  2.5rem;   /* 40px */
  --space-12:  3rem;     /* 48px */
  --space-16:  4rem;     /* 64px */
  --space-20:  5rem;     /* 80px */
  --space-24:  6rem;     /* 96px */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --nav-height:    60px;
  
  --container-sm:  540px;
  --container-md:  720px;
  --container-lg:  960px;
  --container-xl:  1140px;
  --container-2xl: 1320px;

  --grid-columns:  12;
  --grid-gutter:   1.5rem;  /* 24px */

  /* ── Borders & Radius ─────────────────────────────────────────────────── */
  --radius-sm:   0.25rem;  /* 4px  */
  --radius-md:   0.5rem;   /* 8px  */
  --radius-lg:   0.75rem;  /* 12px */
  --radius-xl:   1rem;     /* 16px */
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-2: 2px;

  /* ── Shadows ──────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.12);

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --duration-fast:   120ms;
  --duration-normal: 200ms;
  --duration-slow:   350ms;
  --ease-default:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:         cubic-bezier(0.4, 0, 1, 1);
  --ease-out:        cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:     cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ────────────────────────────────────────────────────── */
  --z-base:    1;
  --z-above:   10;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
}