/* ============================================================
   BeadShop Design Tokens
   Load order: FIRST stylesheet in _Layout.cshtml bundle.
   All other CSS files reference these custom properties.
   ============================================================ */

:root {

  /* ── Primitive colour palette ───────────────────────────── */
  --color-orange-400: #F4A137;
  --color-orange-600: #d4851a;
  --color-green-500:  #5cb85c;
  --color-green-700:  #3d8b3d;
  --color-red-500:    #d9534f;
  --color-red-700:    #b52b27;
  --color-blue-400:   #5bc0de;
  --color-blue-500:   #337ab7;
  --color-blue-700:   #245580;
  --color-yellow-400: #f9c922;
  --color-white:      #ffffff;
  --color-gray-100:   #f8f9fa;
  --color-gray-200:   #e9ecef;
  --color-gray-300:   #dee2e6;
  --color-gray-400:   #ced4da;
  --color-gray-600:   #6c757d;  /* 5.74:1 on white — WCAG AA pass */
  --color-gray-700:   #595959;  /* 7.0:1  on white — WCAG AAA pass */
  --color-gray-800:   #333333;
  --color-gray-900:   #212529;
  --color-black:      #000000;

  /* ── Semantic colour tokens ─────────────────────────────── */
  --color-brand-primary:        var(--color-orange-400);
  --color-brand-primary-dark:   var(--color-orange-600);
  --color-success:              var(--color-green-500);
  --color-success-dark:         var(--color-green-700);
  --color-danger:               var(--color-red-500);
  --color-danger-dark:          var(--color-red-700);
  --color-info:                 var(--color-blue-500);
  --color-warning:              var(--color-yellow-400);

  --color-text-body:            var(--color-gray-900);
  --color-text-muted:           var(--color-gray-600);   /* replaces #999 — now AA-compliant */
  --color-text-subtle:          var(--color-gray-700);   /* for small/secondary text */
  --color-text-link:            var(--color-blue-500);
  --color-text-link-hover:      var(--color-blue-700);

  --color-border:               var(--color-gray-300);
  --color-border-subtle:        var(--color-gray-200);
  --color-surface-base:         var(--color-white);
  --color-surface-subtle:       var(--color-gray-100);
  --color-surface-raised:       var(--color-white);

  /* ── Spacing scale (4-point grid) ───────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-family-base: 'Open Sans', sans-serif;
  --font-size-xs:     11px;
  --font-size-sm:     12px;
  --font-size-base:   14px;
  --font-size-md:     16px;
  --font-size-lg:     18px;
  --font-size-xl:     24px;
  --font-size-2xl:    30px;
  --font-weight-normal:  400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --line-height-tight:   1.25;
  --line-height-base:    1.5;
  --line-height-loose:   1.75;

  /* ── Border radius & shadows ────────────────────────────── */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-pill: 999px;
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg:   0 10px 25px rgba(0, 0, 0, .12);

  /* ── Transitions ────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index scale ──────────────────────────────────────── */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-modal:     1050;
  --z-toast:     1080;
}

/* ── Accessibility utilities ─────────────────────────────────
   Bootstrap 3 does not include .visually-hidden / .sr-only.
   These are essential for Sprint 2 ARIA work.
   ─────────────────────────────────────────────────────────── */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Spacing utility shims ───────────────────────────────────
   Bootstrap 3 lacks the spacing utilities used during the
   inline-style extraction phase (Sprints 1–2). Remove this
   block once the Bootstrap 5 migration (Sprint 3–4) is done.
   ─────────────────────────────────────────────────────────── */
.mb-0  { margin-bottom: 0 !important; }
.mb-1  { margin-bottom: var(--space-1) !important; }
.mb-2  { margin-bottom: var(--space-2) !important; }
.mb-3  { margin-bottom: var(--space-3) !important; }
.mb-4  { margin-bottom: var(--space-4) !important; }
.mb-5  { margin-bottom: var(--space-5) !important; }
.mt-0  { margin-top: 0 !important; }
.mt-1  { margin-top: var(--space-1) !important; }
.mt-2  { margin-top: var(--space-2) !important; }
.mt-3  { margin-top: var(--space-3) !important; }
.mt-4  { margin-top: var(--space-5) !important; }  /* intentional: BS-compatible scale */
.ms-0  { margin-left: 0 !important; }
.me-1  { margin-right: var(--space-1) !important; }
.me-2  { margin-right: var(--space-2) !important; }
.p-0   { padding: 0 !important; }
.p-2   { padding: var(--space-2) !important; }
.p-3   { padding: var(--space-3) !important; }
.py-2  { padding-top: var(--space-2) !important; padding-bottom: var(--space-2) !important; }
.py-3  { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.px-0  { padding-left: 0 !important; padding-right: 0 !important; }
.ps-0  { padding-left: 0 !important; }
.h-100 { height: 100% !important; }
.w-100 { width: 100% !important; }
.text-end { text-align: right !important; }
.gap-2   { gap: var(--space-2); }
.gap-3   { gap: var(--space-3); }
.d-inline { display: inline !important; }

/* ── Topbar link styles ─────────────────────────────────────── */
.topbar-link {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  color: var(--color-gray-700);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background-color var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  background: none;
}

.topbar-link:hover,
.topbar-link:focus {
  color: var(--color-brand-primary);
  background-color: rgba(0,0,0,0.04);
  text-decoration: none;
}

.topbar-link::after {
  /* Override BS5 dropdown caret — use FA icon instead */
  display: none !important;
}

.topbar-link .fas {
  font-size: 11px;
  opacity: 0.7;
}

/* Dropdown arrow indicator for topbar dropdowns */
.topbar-link.dropdown-toggle::before {
  content: '';
  display: none;
}

.topbar-link i.fa-chevron-down {
  font-size: 9px;
  margin-left: 4px;
}

/* Topbar dropdown menu styling */
.topbar-dropdown {
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px 0;
  min-width: 160px;
}

.topbar-dropdown .dropdown-item {
  padding: 6px 16px;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.topbar-dropdown .dropdown-item:hover {
  background-color: var(--color-surface-subtle);
  color: var(--color-brand-primary);
}

.topbar-dropdown .dropdown-item.active {
  background-color: var(--color-surface-subtle);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semi);
}

/* Caret for topbar dropdown toggles */
.header-top .dropdown-toggle::after {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f107'; /* fa-angle-down */
  border: none;
  vertical-align: middle;
  font-size: 10px;
  margin-left: 4px;
}