:root {
  /* 1. COLOUR — BRAND */
  --color-brand-teal: #076e6c;
  --color-brand-teal-dark: #055a58;
  --color-brand-teal-light: #0a8b89;
  --color-brand-teal-10: rgba(7,110,108,0.10);
  --color-brand-teal-20: rgba(7,110,108,0.20);
  --color-brand-teal-35: rgba(7,110,108,0.35);
  --color-brand-navy: #1d2951;
  --color-brand-navy-light: #263566;
  --color-brand-accent: #a0ce4e;
  --color-brand-accent-dark: #82ab36;
  --color-brand-accent-10: rgba(160,206,78,0.10);

  /* 2. COLOUR — NEUTRALS */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f6f6f6;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #ebeaea;
  --color-neutral-300: #d7d6d6;
  --color-neutral-400: #d2d2d2;
  --color-neutral-500: #aaa9a9;
  --color-neutral-600: #747474;
  --color-neutral-700: #333333;
  --color-neutral-800: #2b2b2b;
  --color-neutral-900: #1a1a1a;
  --color-neutral-1000: #000000;

  /* 3. COLOUR — BACKGROUNDS */
  --color-bg-white: #ffffff;
  --color-bg-light: #f5f5f5;
  --color-bg-lighter: #f6f6f6;
  --color-bg-canvas: #d7d6d6;
  --color-bg-teal: #076e6c;
  --color-bg-grey-blue: #7b868c;
  --color-bg-dark: #1d2951;
  --color-bg-black: #000000;
  --color-bg-dropdown: #f2efef;
  --color-bg-menu-hover: #f8f8f8;
  --color-bg-overlay: rgba(0,0,0,0.55);

  /* 4. COLOUR — TEXT */
  --color-text-body: #2b2b2b;
  --color-text-heading: #076e6c;
  --color-text-heading-light: #ffffff;
  --color-text-nav: #ffffff;
  --color-text-nav-dropdown: #1d2951;
  --color-text-link: #333333;
  --color-text-link-hover: #1d2951;
  --color-text-muted: #747474;
  --color-text-placeholder: #aaa9a9;
  --color-text-on-teal: #ffffff;
  --color-text-on-dark: #ffffff;
  --color-text-on-grey-blue: #ffffff;
  --color-text-footer-heading: #1d2951;
  --color-text-footer-body: #ffffff;
  --color-text-footer-bar: #888888;
  --color-text-inverted: #ffffff;

  /* 5. COLOUR — UI & FUNCTIONAL */
  --color-border: #d2d2d2;
  --color-border-mid: #ebeaea;
  --color-border-dark: #dcdadb;
  --color-border-focus: rgba(210,210,210,0.50);
  --color-border-brand: #076e6c;
  --color-divider-footer: #192632;
  --color-divider-section: #e0dede;

  /* 6. COLOUR — SEMANTIC */
  --color-success-bg: #dff0d8;
  --color-success-text: #3c763d;
  --color-warning-bg: #fcf8e3;
  --color-warning-text: #8a6d3b;
  --color-danger-bg: #f2dede;
  --color-danger-text: #a94442;
  --color-info-bg: #d9edf7;
  --color-info-text: #31708f;

  /* 7. TYPOGRAPHY — FONT FAMILIES */
  --font-family-body: 'Raleway', sans-serif;
  --font-family-heading: 'Raleway', sans-serif;
  --font-family-nav: 'Kanit', sans-serif;
  --font-family-mono: 'Courier New', Courier, monospace;
  --font-family-system: -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* 8. TYPOGRAPHY — FONT SIZES (modular scale) */
  --font-size-2xs: 10px;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-md: 17px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 22px;
  --font-size-3xl: 24px;
  --font-size-4xl: 28px;
  --font-size-5xl: 34px;
  --font-size-6xl: 38px;
  --font-size-7xl: 42px;

  /* Named heading sizes */
  --font-size-h1: 34px;
  --font-size-h1-hero: 38px;
  --font-size-h2: 18px;
  --font-size-h2-display: 28px;
  --font-size-h3: 16px;
  --font-size-h3-display: 22px;
  --font-size-h4: 13px;
  --font-size-h5: 12px;
  --font-size-h6: 11px;

  /* Named component sizes */
  --font-size-nav: 15px;
  --font-size-nav-dropdown: 15px;
  --font-size-footer-heading: 18px;
  --font-size-button: 14px;
  --font-size-form: 13px;
  --font-size-caption: 12px;
  --font-size-fine: 11px;

  /* 9. TYPOGRAPHY — FONT WEIGHTS */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* 10. TYPOGRAPHY — LINE HEIGHTS */
  --line-height-none: 1;
  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.75;

  /* 11. TYPOGRAPHY — LETTER SPACING */
  --letter-spacing-tighter: -0.015em;
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0em;
  --letter-spacing-wide: 0.015em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* 12. SPACING — BASE SCALE (4px grid) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-36: 144px;
  --space-38: 150px;

  /* 13. SPACING — SECTION & LAYOUT */
  --section-padding-x: 30px;
  --section-padding-y: 30px;
  --section-padding-y-sm: 20px;
  --section-padding-y-lg: 60px;
  --section-padding-hero: 150px;
  --section-gap: 40px;
  --content-padding-x: 30px;
  --content-padding-y: 20px;

  /* 14. LAYOUT — CONTAINER & GRID */
  --site-width: 1100px;
  --site-width-wide: 1200px;
  --container-padding: 30px;
  --grid-columns: 12;
  --grid-gutter: 4%;
  --grid-gutter-px: 30px;
  --grid-col-margin-bottom: 20px;

  /* 15. COMPONENTS — NAVIGATION */
  --nav-height: 98px;
  --nav-bg: #076e6c;
  --nav-padding-x: 30px;
  --nav-link-font: 'Kanit', sans-serif;
  --nav-link-size: 15px;
  --nav-link-weight: 400;
  --nav-link-color: #ffffff;
  --nav-link-transform: none;
  --nav-link-padding-x: 15px;
  --nav-hover-bg: #a0ce4e;
  --nav-hover-color: #ffffff;
  --nav-dropdown-bg: #f2efef;
  --nav-dropdown-border-top: 3px solid #076e6c;
  --nav-dropdown-min-width: 200px;
  --nav-dropdown-item-padding: 7px 16px;
  --nav-dropdown-font: 'Kanit', sans-serif;
  --nav-dropdown-size: 15px;
  --nav-dropdown-color: #1d2951;
  --nav-dropdown-separator: 1px solid #dcdadb;
  --nav-dropdown-hover-bg: #e8e5e5;
  --nav-mobile-font: 'Raleway', sans-serif;
  --nav-mobile-size: 17px;
  --nav-mobile-color: #ffffff;
  --nav-mobile-bg: #076e6c;

  /* 16. COMPONENTS — BUTTONS */
  --btn-font-family: 'Raleway', sans-serif;
  --btn-font-size: 14px;
  --btn-font-weight: 400;
  --btn-text-transform: uppercase;
  --btn-letter-spacing: 0px;
  --btn-border-radius: 0px;
  --btn-box-shadow: none;
  --btn-transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  --btn-padding: 13px 29px;
  --btn-padding-y: 13px;
  --btn-padding-x: 29px;
  --btn-padding-sm: 11px 23px;
  --btn-padding-y-sm: 11px;
  --btn-padding-x-sm: 23px;
  --btn-primary-bg: #076e6c;
  --btn-primary-color: #ffffff;
  --btn-primary-border: 2px solid transparent;
  --btn-primary-bg-hover: #076e6c;
  --btn-primary-border-hover: 2px solid #ffffff;
  --btn-secondary-bg: transparent;
  --btn-secondary-color: #076e6c;
  --btn-secondary-border: 2px solid #076e6c;
  --btn-secondary-bg-hover: #076e6c;
  --btn-secondary-color-hover: #ffffff;
  --btn-accent-bg: #a0ce4e;
  --btn-accent-color: #333333;
  --btn-accent-border: 2px solid transparent;
  --btn-accent-bg-hover: #82ab36;
  --btn-dark-bg: #1d2951;
  --btn-dark-color: #ffffff;
  --btn-dark-border: 2px solid transparent;
  --btn-dark-bg-hover: #263566;
  --btn-disabled-opacity: 0.5;

  /* 17. COMPONENTS — FORMS & INPUTS */
  --input-font-family: 'Raleway', sans-serif;
  --input-font-size: 13px;
  --input-font-weight: 400;
  --input-color: #2b2b2b;
  --input-placeholder-color: #aaa9a9;
  --input-bg: #ffffff;
  --input-border: 1px solid #d2d2d2;
  --input-border-color: #d2d2d2;
  --input-border-radius: 0px;
  --input-height: 29px;
  --input-padding-x: 10px;
  --input-focus-border-color: rgba(210,210,210,0.50);
  --input-focus-outline: none;
  --textarea-min-height: 100px;
  --textarea-padding: 8px 10px;
  --label-font-size: 13px;
  --label-font-weight: 700;
  --label-color: #333333;
  --label-margin-bottom: 6px;
  --form-group-margin-bottom: 16px;

  /* 18. COMPONENTS — DIVIDERS & DECORATIVE */
  --hero-accent-width: 80px;
  --hero-accent-height: 4px;
  --hero-accent-color: #076e6c;
  --hero-accent-margin-bottom: 16px;
  --separator-height: 5px;
  --separator-color: #d2d2d2;
  --footer-divider-color: #192632;
  --footer-divider-height: 1px;
  --checklist-icon-bg: #a0ce4e;
  --checklist-icon-size: 22px;
  --checklist-tick-color: #ffffff;
  --dropdown-accent-border: 3px solid #076e6c;

  /* 19. BORDERS & RADIUS */
  --border-radius-none: 0px;
  --border-radius-sm: 2px;
  --border-radius-full: 50%;
  --border-width-thin: 1px;
  --border-width-default: 2px;
  --border-width-thick: 3px;
  --border-width-hero: 4px;
  --border-color-default: #d2d2d2;
  --border-color-brand: #076e6c;
  --border-color-mid: #ebeaea;
  --border-color-dark: #192632;

  /* 20. SHADOWS */
  --shadow-none: none;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-xl: 12px 12px 50px rgba(0,0,0,0.40);
  --shadow-button: none;

  /* 21. TRANSITIONS */
  --transition-fast: 0.15s ease;
  --transition-default: 0.20s ease;
  --transition-slow: 0.30s ease;
  --transition-color: color 0.20s ease;
  --transition-bg: background-color 0.20s ease;
  --transition-border: border-color 0.20s ease;
  --transition-all: all 0.20s ease;

  /* 22. Z-INDEX SCALE */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

/* BREAKPOINTS (reference — use values directly in @media queries)
   sm:  480px   md: 768px   lg: 1024px   xl: 1100px   2xl: 1280px */

/* Dark section overrides */
.section--teal,
.section--dark,
.section--grey-blue {
  --color-text-heading: #ffffff;
  --color-text-body: #ffffff;
  --color-text-link: #ffffff;
  --color-text-link-hover: #a0ce4e;
}

/* Utility classes */
.text-primary  { color: var(--color-brand-teal); }
.text-navy     { color: var(--color-brand-navy); }
.text-accent   { color: var(--color-brand-accent); }
.text-muted    { color: var(--color-text-muted); }
.text-white    { color: #ffffff; }
.text-body     { color: var(--color-text-body); }
.bg-primary    { background-color: var(--color-brand-teal); }
.bg-navy       { background-color: var(--color-brand-navy); }
.bg-accent     { background-color: var(--color-brand-accent); }
.bg-light      { background-color: var(--color-bg-light); }
.bg-white      { background-color: var(--color-bg-white); }
.bg-grey-blue  { background-color: var(--color-bg-grey-blue); }
.bg-dark       { background-color: var(--color-bg-dark); }
.bg-black      { background-color: var(--color-bg-black); }