/**
 * Greenwood portal design tokens.
 * Load AFTER Bootstrap CDN, BEFORE app stylesheets.
 * Do not hardcode hex outside this file (or SCSS that maps to these vars).
 */

:root {
  /* ------------------------------------------------------------------ */
  /* Layer 1 — primitives                                               */
  /* ------------------------------------------------------------------ */

  /* Neutrals (Bootstrap gray scale — already de-facto in the portal) */
  --grw-gray-0: #ffffff;
  --grw-gray-50: #f8f9fa;
  --grw-gray-100: #f1f3f5;
  --grw-gray-200: #e9ecef;
  --grw-gray-300: #dee2e6;
  --grw-gray-400: #ced4da;
  --grw-gray-500: #adb5bd;
  --grw-gray-600: #6c757d;
  --grw-gray-700: #495057;
  --grw-gray-800: #343a40;
  --grw-gray-900: #212529;
  --grw-black: #000000;

  /* Brand — Greenwood green */
  --grw-brand-50: #e8f5e9;
  --grw-brand-500: #4caf50;
  --grw-brand-600: #43a047;
  --grw-brand-700: #388e3c;

  /* Status primitives (separate from brand) */
  --grw-success: #28a745;
  --grw-success-bg: #d4edda;
  --grw-success-fg: #155724;

  --grw-warning: #ffc107;
  --grw-warning-bg: #fff3cd;
  --grw-warning-fg: #856404;

  --grw-danger: #dc3545;
  --grw-danger-bg: #f8d7da;
  --grw-danger-fg: #721c24;

  --grw-info: #17a2b8;
  --grw-info-bg: #d1ecf1;
  --grw-info-fg: #0c5460;

  /* Soft accent used in RTL chrome / secondary highlights */
  --grw-accent-soft: #6c9bd1;

  /* ------------------------------------------------------------------ */
  /* Layer 2 — semantic aliases                                         */
  /* ------------------------------------------------------------------ */

  --grw-surface: var(--grw-gray-0);
  --grw-surface-muted: var(--grw-gray-50);
  --grw-border: var(--grw-gray-300);
  --grw-text: var(--grw-black);
  --grw-text-muted: var(--grw-gray-600);

  --grw-overlay-04: rgba(0, 0, 0, 0.04);
  --grw-overlay-06: rgba(0, 0, 0, 0.06);
  --grw-overlay-08: rgba(0, 0, 0, 0.08);
  --grw-overlay-10: rgba(0, 0, 0, 0.1);
  --grw-overlay-12: rgba(0, 0, 0, 0.12);
  --grw-overlay-15: rgba(0, 0, 0, 0.15);
  --grw-overlay-20: rgba(0, 0, 0, 0.2);
  --grw-overlay-40: rgba(0, 0, 0, 0.4);
  --grw-overlay-50: rgba(0, 0, 0, 0.5);

  /* ------------------------------------------------------------------ */
  /* Layer 3 — Bootstrap bridge (visual-neutral values only)            */
  /* ------------------------------------------------------------------ */

  --bs-body-bg: var(--grw-surface);
  --bs-body-color: var(--grw-text);
  --bs-border-color: var(--grw-border);
  --bs-secondary-color: var(--grw-text-muted);

  /* ------------------------------------------------------------------ */
  /* Layer 4 — legacy aliases (existing var(--*) consumers)             */
  /* ------------------------------------------------------------------ */

  --primary-color: var(--grw-brand-500);
  --secondary-color: var(--grw-gray-600);
  --accent-color: #ff9900;
  --error-color: var(--grw-danger);
  --hover-color: #cc0033;
  --main-color: #323232;
  --background-color: var(--grw-surface);
  --background-color-light: #fdfdfd;
  --light-grey: var(--grw-gray-50);
  --text-color: var(--grw-text);
  --border-dashed: 1px dashed var(--grw-gray-0);
  --border-solid: 1px solid var(--grw-gray-0);
  --swiper-navigation-size: 15px !important;
}

/**
 * Brand-primary bridge (opt-in).
 * Enable with <body class="grw-brand-primary"> — portal client first.
 * Bootstrap 5.2 .btn-primary is not CSS-var driven, so we override explicitly.
 *
 * Do NOT recolor all <a> tags: sidebar (.navInner), product titles
 * (.film-color-card__title-link), language switcher, etc. use plain anchors
 * and must keep their own colors. Brand green applies only to primary chrome.
 */
body.grw-brand-primary {
  --bs-primary: var(--grw-brand-500);
  --bs-primary-rgb: 76, 175, 80;
}

body.grw-brand-primary .btn-primary {
  --bs-btn-bg: var(--grw-brand-500);
  --bs-btn-border-color: var(--grw-brand-500);
  --bs-btn-hover-bg: var(--grw-brand-600);
  --bs-btn-hover-border-color: var(--grw-brand-600);
  --bs-btn-active-bg: var(--grw-brand-700);
  --bs-btn-active-border-color: var(--grw-brand-700);
  --bs-btn-disabled-bg: var(--grw-brand-500);
  --bs-btn-disabled-border-color: var(--grw-brand-500);
  background-color: var(--grw-brand-500);
  border-color: var(--grw-brand-500);
}

body.grw-brand-primary .btn-primary:hover,
body.grw-brand-primary .btn-primary:focus {
  background-color: var(--grw-brand-600);
  border-color: var(--grw-brand-600);
}

body.grw-brand-primary .btn-primary:active,
body.grw-brand-primary .btn-primary.active {
  background-color: var(--grw-brand-700);
  border-color: var(--grw-brand-700);
}

body.grw-brand-primary .text-primary {
  color: var(--grw-brand-500) !important;
}

body.grw-brand-primary .bg-primary {
  background-color: var(--grw-brand-500) !important;
}

body.grw-brand-primary .btn-outline-primary {
  --bs-btn-color: var(--grw-brand-500);
  --bs-btn-border-color: var(--grw-brand-500);
  --bs-btn-hover-bg: var(--grw-brand-500);
  --bs-btn-hover-border-color: var(--grw-brand-500);
  --bs-btn-active-bg: var(--grw-brand-600);
  --bs-btn-active-border-color: var(--grw-brand-600);
  color: var(--grw-brand-500);
  border-color: var(--grw-brand-500);
}

body.grw-brand-primary .btn-outline-primary:hover,
body.grw-brand-primary .btn-outline-primary:focus {
  background-color: var(--grw-brand-500);
  border-color: var(--grw-brand-500);
  color: var(--grw-gray-0);
}