/*----------------------------------------------------
Theme Colors - CSS Custom Properties
All frequently used colors are now themed variables
---------------------------------------------------- */

:root {
  /* Primary Colors - Teal from Rujak Logo */
  --color-primary: #4DB8C4;          /* Main teal from logo - navbar, buttons */
  --color-primary-dark: #3A9CA8;     /* Darker teal - navbar background */
  --color-primary-darker: #2E7D87;   /* Darkest teal - header background */
  --color-primary-blue-alt: #5BC4CF; /* Alternative teal */
  --color-primary-blue-alt2: #5BC4CF; /* Alternative teal variant (2 uses) */
  --color-primary-bright: #6DD1DB;   /* Bright teal (2 uses) */
  --color-primary-navy: #1F5E66;     /* Navy teal (2 uses) */
  --color-primary-dark-alt: #2A7379; /* Dark teal alternative (2 uses) */

  /* Accent Colors - Reds from Rujak Logo */
  --color-accent: #D32F2F;           /* Red from logo - highlights, borders */
  --color-accent-hover: #E53935;     /* Red hover state from logo */
  --color-accent-light: #EF5350;     /* Lighter red - links, hover */
  --color-accent-dark: #C62828;      /* Dark red - buttons (2 uses) */
  --color-accent-error: #F44336;     /* Error red */
  --color-accent-pink: #E57373;      /* Pink-red accent (2 uses) */

  /* Secondary Colors - Teal variants complementing logo */
  --color-secondary: #36A2AC;        /* Secondary teal (2 uses) */
  --color-secondary-light: #6DD1DB;  /* Light teal */
  --color-secondary-dark: #1F5E66;   /* Dark teal */
  --color-secondary-muted: #A8C5C9;  /* Muted teal-gray */
  --color-secondary-navy: #184E54;   /* Navy teal (2 uses) */
  --color-secondary-dark-blue: #0F3C42; /* Dark teal (2 uses) */
  --color-secondary-medium: #2E7D87; /* Medium teal (2 uses) */
  --color-secondary-bright: #5BC4CF; /* Bright teal (2 uses) */
  --color-secondary-sky: #C5E8ED;    /* Sky teal (2 uses) */
  --color-teal: #4DB8C4;             /* Teal from logo (2 uses) */

  /* Yellow/Gold Colors */
  --color-yellow: #fab505;           /* Yellow - phone numbers */
  --color-yellow-light: #f7ce1f;     /* Light yellow */
  --color-yellow-dark: #fbb101;      /* Dark yellow */
  --color-yellow-hover: #fbbc19;     /* Yellow hover */

  /* Text Colors - Most used text colors */
  --color-text-primary: #051d3e;     /* Primary headings (33 uses) */
  --color-text-dark: #242424;        /* Dark text (40 uses) */
  --color-text-body: #797979;        /* Body text gray (19 uses) */
  --color-text-gray: #737373;        /* Medium gray text (10 uses) */
  --color-text-gray-alt: #989fa5;    /* Alternative gray (10 uses) */
  --color-text-gray-medium: #a7afb6; /* Medium gray (2 uses) */
  --color-text-muted: #7a7a7a;       /* Muted text (6 uses) */
  --color-text-light: #545454;       /* Light dark text (2 uses) */
  --color-text-white: #ffffff;       /* White text (92 uses) */
  --color-text-black: #000;          /* Pure black (4 uses) */

  /* Background Colors */
  --color-bg-white: #ffffff;         /* White background (92 uses) */
  --color-bg-light: #f0edf7;         /* Light purple-gray (2 uses) */
  --color-bg-gray: #eff0f0;          /* Light gray */
  --color-bg-gray-light: #e7e7e7;    /* Very light gray (7 uses) */
  --color-bg-gray-lighter: #eeeeee;  /* Even lighter gray (5 uses) */
  --color-bg-gray-alt: #e5e5e5;      /* Alternative gray (5 uses) */
  --color-bg-gray-pale: #f3f3f6;     /* Pale gray (2 uses) */
  --color-bg-gray-soft: #efefef;     /* Soft gray (2 uses) */
  --color-bg-blue-light: #e6ecfd;    /* Light blue background (2 uses) */
  --color-bg-blue-pale: #e5ebfd;     /* Pale blue (6 uses) */
  --color-bg-dark: #13213b;          /* Dark background (3 uses) */
  --color-bg-pink: #ddd4da;          /* Pink-ish background (3 uses) */
  --color-bg-cream: #faf6f3;         /* Cream background (6 uses) */

  /* Border Colors */
  --color-border-light: #e4e4e4;     /* Light border (3 uses) */
  --color-border-lighter: #e1e1e1;   /* Lighter border (3 uses) */
  --color-border-medium: #dbdbdb;    /* Medium border (2 uses) */
  --color-border-gray: #e6e6e6;      /* Gray border (2 uses) */
  --color-border-light-gray: #d3d3d3; /* Light gray border (2 uses) */
  --color-border-pale-gray: #aeaeae; /* Pale gray border (2 uses) */
  --color-border-dark: #d6d6d6;      /* Dark border */
  --color-border-dashed: #0a406d;    /* Dashed border in header */

  /* Link Colors */
  --color-link-blue: #6bbbf0;        /* Light blue link */
  --color-link-dark: #2a3274;        /* Dark blue link */
  --color-link-hover: #1356b1;       /* Link hover */

  /* State Colors */
  --color-success: #55b6c7;
  --color-error: #e13535;
  --color-warning: #f7ce1f;

  /* Gradient Colors */
  --gradient-blue-start: #23679d;    /* Blue gradient start (3 uses) */
  --gradient-blue-end: #113c73;      /* Blue gradient end (3 uses) */
  --gradient-yellow-start: #fbb101;  /* Yellow gradient start (3 uses) */
  --gradient-yellow-end: #f7cf20;    /* Yellow gradient end (3 uses) */
  --gradient-gray-start: #e7e7e7;    /* Gray gradient start */
  --gradient-gray-end: #faf6f3;      /* Gray gradient end */

  /* Opacity/Overlay Colors - Common RGBA values */
  --overlay-white-70: rgba(255, 255, 255, 0.7);   /* White 70% opacity (10 uses) */
  --overlay-white-50: rgba(255, 255, 255, 0.5);   /* White 50% opacity (5 uses) */
  --overlay-white-40: rgba(255, 255, 255, 0.4);
  --overlay-white-27: rgba(255, 255, 255, 0.27);
  --overlay-black-50: rgba(0, 0, 0, 0.5);         /* Black 50% opacity (4 uses) */
  --overlay-black-20: rgba(0, 0, 0, 0.2);         /* Black 20% opacity (2 uses) */
  --overlay-black-15: rgba(0, 0, 0, 0.15);
  --overlay-black-14: rgba(0, 0, 0, 0.14);
  --overlay-black-13: rgba(0, 0, 0, 0.13);
  --overlay-gray-50: rgba(155, 168, 192, 0.5);    /* Gray-blue 50% (4 uses) */
  --overlay-accent-90: rgba(189, 36, 51, 0.9);    /* Red accent 90% */
  --overlay-accent-89: rgba(189, 36, 51, 0.89);   /* Red accent 89% */
  --overlay-accent-80: rgba(189, 36, 51, 0.8);    /* Red accent 80% */
}