:root {
  /* === Primary Teal === */
  --teal:           #008080;   /* standard teal - text, backgrounds */
  --teal-dark:      #0B7A7A;   /* buttons, interactive elements */
  --teal-darker:    #004b50;   /* headings, strong text */
  --teal-text:      #00828e;   /* body/section text on detail pages */
  --teal-form:      #00777d;   /* form labels, focus rings (ContactMe) */
  --teal-hover:     #096a6a;   /* button hover states */
  --teal-light:     #f2f9f9;   /* filter section backgrounds */

  /* Gradient stops (kept distinct) */
  --grad-dark:      #004e52;
  --grad-mid:       #009ca3;
  --grad-hover-dark:#003e42;
  --grad-hover-mid: #008a90;
  --header-grad-start: #006b74;
  --header-grad-mid:   #00a6b3;
  --header-grad-end:   #6ec1c8;

  /* === Secondary Yellow/Gold === */
  --accent:         #FFDD00;   /* primary accent */
  --yellow-star:    #f9ed01;   /* star ratings, highlights */
  --yellow-btn:     #FFE600;   /* button text on teal */
  --gold:           #FFD700;   /* decorative accents (ContactMe) */

  /* === Neutrals === */
  --white:          #ffffff;
  --off-white:      #f8f8f8;   /* card backgrounds */
  --gray-bg:        #f2f2f2;   /* band/section backgrounds */
  --gray-light:     #f5f5f5;   /* alt section backgrounds */
  --gray-border:    #ddd;      /* borders, dividers */
  --gray-mid:       #ccc;      /* empty stars, light borders */
  --gray-text:      #888;      /* muted text */
  --gray-dark:      #2b2b2b;   /* near-black dark grey for body text */
  --gray-placeholder:#e5e7eb;  /* ghost/skeleton placeholder backgrounds */
  --gray-bg-fade:   rgba(242,242,242,.9); /* carousel edge fade */

  /* === Arrow / CTA overlay === */
  --yellow-arrow-bg: rgba(249,237,1,.95); /* carousel arrow circles */

  /* === Semantic === */
  --error:          #c0392b;   /* validation errors */
  --valid:          #26b050;   /* valid input outlines */
}