/* =========================================================
   ROOT COLOR VARIABLES (BLUE THEME)
   Backward compatible + extended tokens for better theming
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     Base palette (existing tokens — DO NOT CHANGE NAMES)
     --------------------------------------------------------- */

  /* blue theme primary colors #0095ff */
  --color-primary: hsl(205 100% 50%);        /* buttons, icons and details */
  --color-primary-dark: hsl(205 100% 30%);   /* links, CTAs and hovers */

  /* light variations */
  --color-light-1: hsl(205 100% 100%); /* headings, backgrounds and buttons */
  --color-light-2: hsl(205 100% 97%);  /* body text and backgrounds */
  --color-light-3: hsl(205 100% 94%);  /* borders and fine details */

  /* dark variations */
  --color-dark-1: hsl(205 100% 20%); /* borders and fine details */
  --color-dark-2: hsl(205 100% 15%); /* body text and backgrounds */
  --color-dark-3: hsl(205 100% 10%); /* headings and backgrounds */

  /* buttons and alerts */
  --red-alert: hsl(0 100% 40%);      /* validation alerts and buttons */
  --yellow-alert: hsl(45 100% 51%);  /* validation alerts and buttons */

  /* shadow colors */
  --color-shadow-1: hsla(205 100% 30% / 0.1);  /* primary-dark @ 10% */
  --color-shadow-2: hsl(205 100% 50% / 0.25);  /* primary @ 25% */

  /* green box */
  --green-box-border: hsl(134 61% 41%);
  --green-box: hsl(134 41% 88%);

  /* yellow box */
  --yellow-box-border: hsl(39 100% 50%);
  --yellow-box: hsl(46 100% 90%);

  /* red box */
  --red-box-border: hsl(360 90% 50%);
  --red-box: hsl(360 90% 95%);

  /* purple box */
  --purple-box-border: hsl(302 48% 44%);
  --purple-box: hsl(276 100% 97%);

  /* gray box */
  --gray-box-border: hsl(0 0% 35%);
  --gray-box: hsl(0 0% 95%);

  /* ---------------------------------------------------------
     Extended theme tokens (NEW)
     --------------------------------------------------------- */

  /* ===== Global surfaces / text (optional but recommended) ===== */
  --page-background: var(--color-light-3);
  --page-text: var(--color-dark-2);
  --heading-text: var(--color-dark-3);

  --surface-1: var(--color-light-1);
  --surface-2: var(--color-light-2);
  --surface-3: var(--color-light-3);

  --border-subtle: var(--color-light-3);
  --border-strong: var(--color-dark-1);

  --background-dark: var(--color-dark-3);
  --background-dark-heading: var(--color-light-1);

  /* ===== Accent (optional luxury highlight) ===== */
  --accent-color: var(--color-primary);
  --accent-strong: var(--color-primary-dark);
  --accent-contrast: var(--color-light-1);

  /* ===== Links ===== */
  --link-color: var(--color-primary);
  --link-color-hover: var(--color-primary-dark);

  /* ===== Focus ===== */
  --focus-ring-color: var(--color-shadow-2);
  --focus-outline-color: var(--link-color-hover);

  /* ===== Buttons (primary CTA) ===== */
  --button-background: var(--color-primary);
  --button-background-hover: var(--color-primary-dark);
  --button-background-active: var(--color-primary-dark);

  --button-text: var(--color-light-1);
  --button-text-hover: var(--color-light-1);
  --button-text-active: var(--color-light-1);

  --button-border: var(--color-light-3);
  --button-border-hover: var(--color-light-3);
  --button-border-active: var(--color-light-3);
  --button-border-focus: var(--color-primary);

  --button-focus-ring: var(--focus-ring-color);

  /* Optional: buttons on dark panels */
  --button-dark-border: var(--color-dark-1);

  /* ===== Form fields (input/select/textarea) ===== */
  --field-background: var(--color-light-2);
  --field-background-focus: var(--color-light-1);

  --field-border: var(--color-light-3);
  --field-border-hover: var(--color-primary-dark);
  --field-border-focus: var(--color-primary);

  --field-text: var(--color-dark-3);
  --field-placeholder: var(--color-dark-3);

  --field-focus-ring: var(--focus-ring-color);

  /* Checkbox tick (decoupled from accent if desired by themes) */
  --checkbox-check: var(--accent-color);

  /* Dark panel fields (offer-dark) */
  --field-dark-background: var(--color-light-1);
  --field-dark-border: var(--color-dark-1);
  --field-dark-text: var(--color-dark-3);

  /* ===== Navigation ===== */
  --nav-background: var(--color-light-1);
  --nav-border-top: var(--color-light-3);
  --nav-border-bottom: var(--color-dark-1);

  --nav-link-color: var(--color-dark-2);
  --nav-link-divider: var(--nav-border-top);
  --nav-link-hover-background: var(--color-light-3);

  --nav-link-active-background: var(--color-dark-2);
  --nav-link-active-color: var(--color-light-1);

  /* ===== Accordion (FAQ) ===== */
  --accordion-card-background: var(--color-light-1);
  --accordion-card-border: var(--color-light-3);
  --accordion-card-shadow: var(--color-light-3);

  --accordion-summary-background: var(--color-dark-1);
  --accordion-summary-background-hover: var(--color-dark-2);
  --accordion-summary-text: var(--color-light-1);

  /* ===== Panels / surfaces ===== */
  --panel-light-background: var(--color-light-1);
  --panel-light-text: var(--color-dark-3);

  --panel-dark-background: var(--color-dark-3);
  --panel-dark-text: var(--color-light-1);

  /* ===== Footer ===== */
  --footer-background: var(--color-dark-1);
  --footer-text: var(--color-light-3);
  --footer-link-color: var(--color-light-3);
  --footer-link-hover-color: var(--color-light-2);
}