/* ============================================================
   NEEDS ONLINE SHOPPING — BRAND COLOR SYSTEM
   Platform: 6Valley Multi Vendor v16.1
   Version: 1.0.0
   Source: Brand_Guidelines.md
   ============================================================
   USAGE:
   Import this file BEFORE custom.css in your theme's main
   layout (e.g. resources/themes/default/layouts/master.blade.php)
   so these variables are available to all overrides.

   <link rel="stylesheet" href="{{ asset('assets/front-end/css/needs-brand-colors.css') }}">
   <link rel="stylesheet" href="{{ asset('assets/front-end/css/custom.css') }}">
   ============================================================ */

:root {

  /* ---------- CORE BRAND COLORS (from Brand_Guidelines) ---------- */
  --color-primary: #1B8F3A;         /* Primary Green — trust, main CTA */
  --color-primary-dark: #167A31;    /* Hover/active state for green */
  --color-secondary: #FFFFFF;       /* Secondary White */
  --color-accent: #FF7A00;          /* Accent Orange — highlight, discount, secondary CTA */
  --color-accent-dark: #E06D00;     /* Hover/active state for orange */
  --color-text-dark: #1F2937;       /* Dark Text */
  --color-bg: #F8FAFC;              /* Page/section background */
  --color-success: #16A34A;         /* Success states */
  --color-warning: #F59E0B;         /* Warning states, ratings, pending */
  --color-danger: #DC2626;          /* Danger, errors, cancel */

  /* ---------- SUPPORTING NEUTRALS (not in original palette — proposed) ----------
     NOTE: These fill gaps for disabled states, muted text, and info messages.
     Recommend formally adding to Brand_Guidelines.md if approved. */
  --color-gray-100: #F3F4F6;        /* Lightest neutral bg (chips, subtle sections) */
  --color-gray-300: #D1D5DB;        /* Borders, dividers */
  --color-gray-400: #9CA3AF;        /* Disabled buttons, empty stars */
  --color-gray-500: #6B7280;        /* Muted/strikethrough price text */
  --color-info: #2563EB;            /* Info alerts/messages (proposed) */

  /* ============================================================
     SEMANTIC / COMPONENT-LEVEL VARIABLES
     (map brand colors to specific UI roles — edit values above,
     not these, to keep everything in sync)
     ============================================================ */

  /* Buttons */
  --btn-buy-now-bg: var(--color-primary);
  --btn-buy-now-text: var(--color-secondary);
  --btn-buy-now-hover: var(--color-primary-dark);

  --btn-add-to-cart-bg: var(--color-accent);
  --btn-add-to-cart-text: var(--color-secondary);
  --btn-add-to-cart-hover: var(--color-accent-dark);

  --btn-checkout-confirm-bg: var(--color-primary);
  --btn-checkout-confirm-text: var(--color-secondary);

  --btn-cancel-delete-bg: var(--color-danger);
  --btn-cancel-delete-text: var(--color-secondary);

  --btn-disabled-bg: var(--color-gray-400);
  --btn-disabled-text: var(--color-secondary);

  /* Badges */
  --badge-discount-bg: var(--color-accent);
  --badge-discount-text: var(--color-secondary);

  --badge-new-bg: var(--color-primary);
  --badge-new-text: var(--color-secondary);

  --badge-bestseller-bg: var(--color-warning);
  --badge-bestseller-text: var(--color-text-dark);

  --badge-outofstock-bg: var(--color-text-dark);
  --badge-outofstock-text: var(--color-secondary);

  --badge-flashsale-bg: var(--color-danger);
  --badge-flashsale-text: var(--color-secondary);

  /* Pricing */
  --price-original-text: var(--color-gray-500);   /* strikethrough */
  --price-discounted-text: var(--color-primary);
  --price-save-text: var(--color-success);

  /* Ratings */
  --star-filled: var(--color-warning);
  --star-empty: var(--color-gray-300);
  --badge-verified-bg: var(--color-success);
  --badge-verified-text: var(--color-secondary);

  /* Order Status */
  --status-pending: var(--color-warning);
  --status-confirmed: var(--color-primary);
  --status-shipped: var(--color-accent);
  --status-delivered: var(--color-success);
  --status-cancelled: var(--color-danger);

  /* Alerts / Notifications */
  --alert-success-bg: var(--color-success);
  --alert-warning-bg: var(--color-warning);
  --alert-danger-bg: var(--color-danger);
  --alert-info-bg: var(--color-info);
  --alert-text: var(--color-secondary);

  /* Navigation & Layout */
  --nav-bg: var(--color-secondary);
  --nav-active-item: var(--color-primary);
  --footer-bg: var(--color-text-dark);
  --footer-text: var(--color-secondary);
  --page-bg: var(--color-bg);
  --link-default: var(--color-text-dark);
  --link-hover: var(--color-primary);
  --chip-bg: var(--color-bg);
  --chip-text: var(--color-text-dark);
  --chip-active-bg: var(--color-primary);
  --chip-active-text: var(--color-secondary);

  /* Vendor / Shop */
  --shop-verified-badge: var(--color-success);
  --shop-follow-btn-border: var(--color-primary);
  --shop-vacation-badge: var(--color-warning);
}

/* ============================================================
   EXAMPLE USAGE (reference only — actual selectors depend on
   your theme's existing class names; verify via discovery script
   before applying to production blade/CSS files)
   ============================================================

.product-buy-now-button {
  background-color: var(--btn-buy-now-bg);
  color: var(--btn-buy-now-text);
}
.product-buy-now-button:hover {
  background-color: var(--btn-buy-now-hover);
}

.discount-badge {
  background-color: var(--badge-discount-bg);
  color: var(--badge-discount-text);
}

.price-old {
  color: var(--price-original-text);
  text-decoration: line-through;
}
.price-new {
  color: var(--price-discounted-text);
  font-weight: 600;
}

============================================================ */