/* ============================================================
   Brand / System Color Tokens  —  variables.css
   ─────────────────────────────────────────────────────────────
   Load this stylesheet BEFORE all other component stylesheets.
   All custom properties are declared on :root and are therefore
   globally available across every CSS file once this file loads.

   Usage in any component CSS:
     color: var(--clr-blue);
     background: var(--clr-orange);
   ============================================================ */

:root {
  /* ── Blue  (primary brand) ──────────────────────────────── */
  --clr-blue:        #25639c;
  --clr-blue-dark:   #1a4f82;
  --clr-blue-mid:    #2e7ab8;
  --clr-blue-light:  #e8f0f8;
  --clr-blue-bg:     #f4f7fb;
  --clr-blue-hover:  #eef4fb;

  /* ── Orange  (accent / CTA) ─────────────────────────────── */
  --clr-orange:        #ff6c2c;
  --clr-orange-dark:   #ee3824;
  --clr-orange-mid:    #ff924f;
  --clr-orange-light:  #fff3ef;
  --clr-orange-faint:  #fff5f0;

  /* ── Dark Navy  (headers / dark cards) ──────────────────── */
  --clr-navy:         #25315b;
  --clr-navy-dark:    #0f1630;
  --clr-navy-deeper:  #1a2240;
  --clr-navy-text:    #1a1a2e;

  /* ── Semantic / state ───────────────────────────────────── */
  --clr-success:  #27ae60;
  --clr-error:    #dc2626;
  --clr-info:     #0094ff;

  /* ── Neutral backgrounds ─────────────────────────────────── */
  --clr-white:     #ffffff;
  --clr-bg-soft:   #f5f6fa;
  --clr-bg-muted:  #f9fafb;
  --clr-bg-input:  #f4f5f9;

  /* ── Borders ─────────────────────────────────────────────── */
  --clr-border:        rgba(205, 205, 205, 0.54);
  --clr-border-blue:   #e0eaf3;
  --clr-border-light:  #f0f4f8;
  --clr-border-mid:    #e5e7eb;

  /* ── Text ───────────────────────────────────────────────── */
  --clr-text-dark:   #1a1a2e;
  --clr-text-base:   #374151;
  --clr-text-mid:    #555555;
  --clr-text-muted:  #888888;
  --clr-text-faint:  #aaaaaa;
  --clr-text-label:  #2c3e50;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-blue-sm:   0 2px 12px rgba(37, 99, 156, 0.07);
  --shadow-blue-md:   0 4px 14px rgba(37, 99, 156, 0.22);
  --shadow-blue-lg:   0 8px 32px rgba(37, 99, 156, 0.14);
  --shadow-card:      0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.13);

  /* ── Gradients ───────────────────────────────────────────── */
  --grad-blue:    linear-gradient(135deg, #25639c, #1a4f82);
  --grad-orange:  linear-gradient(135deg, #ff6c2c, #ee3824);
  --grad-navy:    linear-gradient(135deg, #25315b, #0f1630);

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-pill: 100px;

  /* ── Transitions ─────────────────────────────────────────── */
  --trans-fast:   0.15s ease;
  --trans-normal: 0.25s ease;


  /* ══════════════════════════════════════════════════════════
     NEW VARIABLES  (added during CSS refactor)
     ══════════════════════════════════════════════════════════ */

  /* ── Extended text colors ───────────────────────────────── */
  --clr-text-heading:    #111827;   /* near-black headings (coupons, loc-info) */
  --clr-text-secondary:  #6b7280;   /* mid-grey for labels, breadcrumb links */
  --clr-text-placeholder: #9ca3af;  /* input placeholder text */
  --clr-text-body:       #4b5563;   /* body copy in review/description cards */
  --clr-text-dark-alt:   #494949;   /* legacy dropdown link text */

  /* ── Black / near-black ──────────────────────────────────── */
  --clr-black:  #000000;            /* pure black (user-dropdown, forms) */

  /* ── Extended border tokens ─────────────────────────────── */
  --clr-border-off:      #f0f0f0;   /* light separator inside dropdowns */
  --clr-border-ui:       #e9ecef;   /* Bootstrap-style UI borders */
  --clr-border-section:  #f0f2f8;   /* section card inner border */

  /* ── Header / dropdown specific ─────────────────────────── */
  --clr-error-light:  #f87171;      /* light red used for drawer logout button */
  --clr-error-bg:     #fef2f2;      /* light red background (error states) */
  --clr-error-bg-soft: #fff5f5;     /* softer red bg (billing locate error) */
  --clr-error-border: #ffcdd2;      /* red border (pax-card-remove, locate-error) */
  --clr-error-hover-bg: #ffe5e5;    /* red hover background */
  --clr-error-strong: #e53935;      /* stronger red for remove buttons / pax errors */
  --clr-error-deep:   #c62828;      /* deep red text (billing locate error) */

  /* ── Vehicle-checkout specific ───────────────────────────── */
  --clr-step-num-bg:   #e8ebf8;     /* inactive step circle background */
  --clr-step-divider:  #dde0ee;     /* divider line between steps */
  --clr-amount-bg:     #f8f9ff;     /* amount reminder box background */
  --clr-tile-border:   #e0e0e0;     /* payment tile default border */
  --clr-pax-border:    #e8ebf5;     /* passenger card border */
  --clr-pax-header-bg: #f5f7ff;     /* passenger card header background */
  --clr-pax-input-border: #e0e4f0;  /* passenger input border */

  /* ── Toggle / switch ────────────────────────────────────── */
  --clr-toggle-off:  #d1d5db;       /* off-state track color for custom toggles */

  /* ── Location / map UI ───────────────────────────────────── */
  --clr-map-btn-bg:     #f3f4f6;    /* map button default background */
  --clr-suggestion-sep: #f3f4f6;    /* suggestion list item separator */

  /* ── Amber / yellow accent (coupon, pickup-type radio) ───── */
  --clr-amber:      #f59e0b;        /* amber accent for coupon focus / radio */
  --clr-amber-dark: #b45309;        /* darker amber for checked radio label */
  --clr-amber-bg:   #fffbeb;        /* amber-tinted background */

  /* ── Coupon-specific ─────────────────────────────────────── */
  --clr-coupon-applied-border: #22c55e;  /* green border when coupon applied */
  --clr-coupon-applied-bg:     #f0fdf4;  /* green-tinted bg when coupon applied */
  --clr-success-dark:          #15803d;  /* dark green for success feedback text */
  --clr-success-border:        #bbf7d0;  /* light green border for success feedback */

  /* ── User Details Form (udf-*) ───────────────────────────── */
  --clr-udf-accent:        #f15a24;  /* orange-red accent (focus, checkbox, select) */
  --clr-udf-label:         #2f2f2f;  /* near-black form label text */
  --clr-udf-border:        #e6e6e6;  /* default input border */
  --clr-udf-border-hover:  #dcdcdc;  /* input border on hover */
  --clr-udf-input-text:    #222222;  /* input value text */
  --clr-udf-placeholder:   #b5b5b5;  /* input placeholder */
  --clr-udf-disabled-bg:   #f5f6f8;  /* disabled input background */
  --clr-udf-disabled-text: #9a9a9a;  /* disabled input text */
  --clr-udf-error-bg:      #fff9f9;  /* error state input background */
  --clr-udf-divider:       #f1f1f1;  /* horizontal divider line */
  --clr-udf-save-text:     #444444;  /* "save for next time" checkbox label */

  /* ── Notification dropdown ───────────────────────────────── */
  --clr-unread-bg:      #f5f5f5;     /* unread notification item background */
  --clr-notif-hover-bg: #fabca1;     /* notification item hover background */
  --clr-text-faint-alt: #a2a2a2;     /* muted grey used for email / timestamps */

  /* ── Vehicle details ────────────────────────────────────── */
  --clr-badge-navy:       #44456c;   /* dark navy-purple for vd-badge and terms */
  --clr-model-name-hover-bg: #ecedf5; /* hovered Car_Model_name background */

  /* ── Breadcrumb ─────────────────────────────────────────── */
  --clr-bc-sep:  #d1d5db;           /* breadcrumb separator chevron color */

  /* ── Review / Ratings ───────────────────────────────────── */
  --clr-star:        #f59e0b;       /* star / score color */
  --clr-star-light:  #fbbf24;       /* lighter star (gradient end) */
  --clr-star-bg:     #fef3c7;       /* star icon container background */
  --clr-star-border: #fde68a;       /* ro-card border color */
  --clr-rs-label-bg:   #e6f4ea;     /* "Excellent" label background */
  --clr-rs-label-text: #2e7d32;     /* "Excellent" label text */
  --clr-orange-icon:   #f97316;     /* orange used for description/toggle icons */

  /* ── Keep In Mind ───────────────────────────────────────── */
  --clr-kim-border: #ebebeb;        /* rule item border */
  --clr-kim-bg:     #fafafa;        /* rule item background */
  --clr-kim-label:  #333333;        /* rule label text */

  /* ── Filter Sidebar ─────────────────────────────────────── */
  --clr-fsb-scrollbar:          #d0dce8;  /* sidebar scrollbar thumb */
  --clr-fsb-section-hover:      #f7fafc;  /* section header hover/open background */
  --clr-fsb-check-hover:        #f0f6fb;  /* check-item hover background */
  --clr-fsb-pill-text:          #444444;  /* default pill / label text */
  --clr-fsb-footer-clear-bg:    #f4f4f4;  /* footer clear button background */
  --clr-fsb-footer-clear-border: #dddddd; /* footer clear button border */
  --clr-fsb-footer-clear-text:  #666666;  /* footer clear button text */
  --clr-fsb-footer-clear-hover: #eaeaea;  /* footer clear button hover */

  /* ── Car Inner Box ──────────────────────────────────────── */
  --clr-cib-border:        #e4ecf5;  /* card default border */
  --clr-cib-border-hover:  #c5d9ee;  /* card hover border */
  --clr-cib-media-bg:      #f0f2f5;  /* media panel background */
  --clr-cib-rating-score:  #c97e00;  /* amber-gold rating score text */
  --clr-cib-divider:       #eaf2f9;  /* card body divider */
  --clr-spec-chip-bg:      #eff5fb;  /* spec chip background */
  --clr-spec-chip-border:  #cfe0ef;  /* spec chip border */
  --clr-success-chip-bg:   #edf9f2;  /* "new" success chip background */
  --clr-success-chip-border: #b6e8cc; /* "new" success chip border */

  /* ── Ride Request Form ──────────────────────────────────── */
  --clr-rrf-body-bg:         #f8fafd;  /* form body background */
  --clr-rrf-label:           #6b7a8d;  /* field label text */
  --clr-rrf-exchange:        #b0bec5;  /* exchange icon color */
  --clr-rrf-header-border:   #f0f3f8;  /* header bottom border */
  --clr-rrf-input-bg:        #f4f8fc;  /* pickup location input background */
  --clr-rrf-input-border:    #dde8f4;  /* pickup location input border */
  --clr-rrf-dropoff-bg:      #fff9f7;  /* dropoff location input background */
  --clr-rrf-dropoff-border:  #f5ddd5;  /* dropoff location input border */
  --clr-rrf-toggle-bg:       #f0f6ff;  /* return-same-location toggle row background */
  --clr-rrf-age-bg:          #fff8f5;  /* driver age box background */
  --clr-rrf-age-border:      #fde4d5;  /* driver age box border */

  /* ── Coupon button hover ─────────────────────────────────── */
  --clr-orange-hover:  #e85d1f;  /* darker orange for button hover states */
  --clr-amber-hover:   #d97706;  /* darker amber for button hover states */

  /* ── Payment icon gradient ───────────────────────────────── */
  --clr-navy-info-grad: linear-gradient(135deg, var(--clr-navy), var(--clr-info));  /* navy→info-blue gradient for credit card icon */

  /* ── Chat ───────────────────────────────────────────────── */
  --clr-sender-bg:      rgb(0, 123, 255); /* sender bubble background */
  --clr-chat-avatar-bg: #f8f9fa;          /* avatar circle / receiver bubble */

  /* ── Forms (legacy forms.css) ───────────────────────────── */
  --clr-forms-bg:  #f5f5f5;         /* form-control background */

  /* ── Location info card (pickup / drop color coding) ────── */
  --clr-loc-pickup-border:  #fed7aa; /* pickup info card border (warm orange) */
  --clr-loc-pickup-bg:      #fff7ed; /* pickup info card background */
  --clr-loc-drop-border:    #bfdbfe; /* drop info card border (cool blue) */
  --clr-loc-drop-bg:        #eff6ff; /* drop info card background */
  --clr-loc-pickup-text:    #c2410c; /* pickup info header text */
  --clr-loc-drop-text:      #1d4ed8; /* drop info header text */

  /* ── Drop-pill active state (blue accent) ───────────────── */
  --clr-drop-pill-active-border: #3b82f6; /* active drop pill border */
  --clr-drop-pill-active-bg:     #eff6ff; /* active drop pill background */
  --clr-drop-pill-active-text:   #1d4ed8; /* active drop pill text */

  /* ── Bootstrap-compatible validation colors ─────────────── */
  --clr-valid:    #28a745;  /* Bootstrap success / valid input border */
  --clr-invalid:  #dc3545;  /* Bootstrap danger / invalid input border */
}