/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — the single source of truth for the Breeders Direct design system.

   Loaded AFTER Bootstrap so it can redefine Bootstrap's own custom properties.
   That is deliberate and it is the main lever of this redesign: Bootstrap 5.3
   is driven by CSS variables, so restyling its variables here restyles every
   Bootstrap component across all 89 pages without a single !important.

   Nothing in this file selects a component. Tokens only.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ─── Palette: neutral ramp ──────────────────────────────────────────────
     A cool teal-slate derived from the original body colour (#19373f), which
     now sits at neutral-750. Steps are perceptually even so surfaces stack
     predictably: the further forward an element is, the lighter it reads. */
  --bd-neutral-990: #060f13;
  --bd-neutral-950: #0a161b;
  --bd-neutral-900: #0e1d23;
  --bd-neutral-850: #12262d;
  --bd-neutral-800: #162e36;
  --bd-neutral-750: #19373f;
  --bd-neutral-700: #1f4149;
  --bd-neutral-650: #264d57;
  --bd-neutral-600: #2f5b66;
  /* 500 and 400 were lightened after a contrast audit. Their previous values
     (#3f7280 / #598e9c) drive --text-disabled and --text-muted, and measured
     2.37–3.48:1 and 3.48–5.05:1 against the surface ramp — i.e. --text-muted
     failed WCAG AA (4.5:1) on cards, inputs and menus, which is exactly where
     labels, meta and captions live. Current values clear 4.5:1 on every surface
     from --surface-base through --surface-4. Do not darken these without
     re-running the check. */
  --bd-neutral-500: #518694;
  --bd-neutral-400: #75a3b0;
  --bd-neutral-300: #7fabb7;
  --bd-neutral-200: #a9c7d0;
  --bd-neutral-150: #c4dae1;
  --bd-neutral-100: #dceaee;
  --bd-neutral-50:  #eff6f8;
  --bd-white:       #ffffff;

  /* ─── Palette: brand green (anchored on the original #64c85d) ─────────── */
  --bd-green-950: #061a06;
  --bd-green-900: #0d2a0c;
  --bd-green-800: #14400f;
  --bd-green-700: #1e5c1a;
  --bd-green-600: #3aa834;
  --bd-green-500: #64c85d;
  --bd-green-400: #85d67e;
  --bd-green-300: #a7e3a1;
  --bd-green-200: #c9f0c5;
  --bd-green-100: #e4f8e2;

  /* ─── Palette: accent amber (anchored on the original #f8a62f) ────────── */
  --bd-amber-900: #3d2503;
  --bd-amber-800: #5c3806;
  --bd-amber-700: #8a5309;
  --bd-amber-600: #c47b12;
  --bd-amber-500: #f8a62f;
  --bd-amber-400: #ffbc5e;
  --bd-amber-300: #ffd196;
  --bd-amber-200: #ffe4c2;

  /* ─── Palette: teal (anchored on the original #4fc3c3) ───────────────── */
  --bd-teal-900: #05282a;
  --bd-teal-800: #093e41;
  --bd-teal-700: #0e5f63;
  --bd-teal-600: #2a9a9c;
  --bd-teal-500: #4fc3c3;
  --bd-teal-400: #77d3d3;
  --bd-teal-300: #a3e2e2;

  /* ─── Palette: red / danger ──────────────────────────────────────────── */
  --bd-red-900: #350d0e;
  --bd-red-800: #521416;
  --bd-red-700: #7d1e21;
  --bd-red-600: #bf3339;
  --bd-red-500: #e5484d;
  --bd-red-400: #f27176;
  --bd-red-300: #f9a4a7;

  /* ─── Palette: violet (charts, secondary data series) ────────────────── */
  --bd-violet-700: #3b2a6b;
  --bd-violet-600: #5b46a0;
  --bd-violet-500: #7c68c8;
  --bd-violet-400: #9d8ddb;


  /* ═══ SEMANTIC LAYER ═══════════════════════════════════════════════════
     Components must reference these, never the raw palette above. Swapping a
     theme then means reassigning this block only. */

  /* Surfaces — ascending = closer to the viewer */
  --surface-sunken:  var(--bd-neutral-990);
  --surface-base:    var(--bd-neutral-950);
  --surface-1:       var(--bd-neutral-900);
  --surface-2:       var(--bd-neutral-850);
  --surface-3:       var(--bd-neutral-800);
  --surface-4:       var(--bd-neutral-750);
  --surface-5:       var(--bd-neutral-700);
  --surface-inverse: var(--bd-neutral-50);

  /* Translucent surface washes — for glass/overlay effects over imagery */
  --surface-glass:      rgba(14, 29, 35, 0.72);
  --surface-glass-thin: rgba(14, 29, 35, 0.45);
  --surface-scrim:      rgba(6, 15, 19, 0.78);
  --surface-hover:      rgba(255, 255, 255, 0.04);
  --surface-active:     rgba(255, 255, 255, 0.07);
  --surface-selected:   rgba(100, 200, 93, 0.10);

  /* Text */
  --text-primary:   var(--bd-neutral-50);
  --text-secondary: var(--bd-neutral-200);
  --text-tertiary:  var(--bd-neutral-300);
  --text-muted:     var(--bd-neutral-400);
  --text-disabled:  var(--bd-neutral-500);
  --text-inverse:   var(--bd-neutral-950);
  --text-brand:     var(--bd-green-500);
  --text-accent:    var(--bd-amber-500);
  --text-on-brand:  var(--bd-green-950);
  --text-on-accent: var(--bd-amber-900);

  /* Borders — dark UIs read better with translucent hairlines than solid greys */
  --border-subtle:  rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.20);
  --border-brand:   rgba(100, 200, 93, 0.45);
  --border-focus:   var(--bd-green-400);

  /* Interactive / brand */
  --brand:            var(--bd-green-500);
  --brand-hover:      var(--bd-green-400);
  --brand-active:     var(--bd-green-600);
  --brand-subtle:     rgba(100, 200, 93, 0.12);
  --brand-subtle-hi:  rgba(100, 200, 93, 0.20);

  --accent:           var(--bd-amber-500);
  --accent-hover:     var(--bd-amber-400);
  --accent-subtle:    rgba(248, 166, 47, 0.12);

  /* Status */
  --status-success:        var(--bd-green-500);
  --status-success-subtle: rgba(100, 200, 93, 0.13);
  --status-warning:        var(--bd-amber-500);
  --status-warning-subtle: rgba(248, 166, 47, 0.13);
  --status-danger:         var(--bd-red-500);
  --status-danger-subtle:  rgba(229, 72, 77, 0.13);
  --status-info:           var(--bd-teal-500);
  --status-info-subtle:    rgba(79, 195, 195, 0.13);
  --status-neutral:        var(--bd-neutral-400);
  --status-neutral-subtle: rgba(255, 255, 255, 0.07);

  /* ─── Legacy aliases ─────────────────────────────────────────────────────
     help.htm and admin-dashboard.htm style themselves with
     `var(--card-bg, #1e1e2e)`, `var(--border-color, #2e2e42)` and
     `var(--accent-color, #7c3aed)`. Those variable names were never defined
     anywhere in the theme, so both pages had been rendering entirely from their
     fallback literals — a violet/indigo palette grafted onto a green site.

     Mapping them here fixes both pages at once and makes the fallbacks dead
     code. Prefer the semantic names above in new work; these exist so the two
     pages do not need rewriting to come onto the system. */
  --card-bg:      var(--surface-2);
  --border-color: var(--border-default);
  --accent-color: var(--brand);

  /* Data-visualisation series — ordered for maximum adjacent separation */
  --chart-1: var(--bd-green-500);
  --chart-2: var(--bd-teal-500);
  --chart-3: var(--bd-amber-500);
  --chart-4: var(--bd-violet-500);
  --chart-5: var(--bd-red-400);
  --chart-6: var(--bd-neutral-300);


  /* ═══ TYPOGRAPHY ═══════════════════════════════════════════════════════ */

  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Raleway", var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;

  /* Modular scale. --fs-ui is the chrome/table size; --fs-body is prose. */
  --fs-3xs:  0.625rem;   /* 10px — dense table meta, overline labels */
  --fs-2xs:  0.6875rem;  /* 11px */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.8125rem;  /* 13px — dense table cells */
  --fs-ui:   0.875rem;   /* 14px — buttons, inputs, nav, app chrome */
  --fs-body: 0.9375rem;  /* 15px — default document text */
  --fs-md:   1rem;       /* 16px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   1.3125rem;  /* 21px — card / panel titles */
  --fs-2xl:  1.625rem;   /* 26px — page titles */
  --fs-3xl:  2.125rem;   /* 34px — section headings */
  --fs-4xl:  2.75rem;    /* 44px */
  --fs-5xl:  3.5rem;     /* 56px — hero */
  --fs-6xl:  4.5rem;     /* 72px — display */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extra:    800;

  --lh-none:    1;
  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* Optical tracking — tighten as size grows, open up for small caps labels */
  --ls-tighter: -0.03em;
  --ls-tight:   -0.015em;
  --ls-normal:  0;
  --ls-wide:    0.02em;
  --ls-wider:   0.06em;
  --ls-widest:  0.12em;


  /* ═══ SPACING — 4px base grid ══════════════════════════════════════════ */

  --space-0:  0;
  --space-px: 1px;
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.25rem;   /* 20 */
  --space-6:  1.5rem;    /* 24 */
  --space-7:  1.75rem;   /* 28 */
  --space-8:  2rem;      /* 32 */
  --space-10: 2.5rem;    /* 40 */
  --space-12: 3rem;      /* 48 */
  --space-14: 3.5rem;    /* 56 */
  --space-16: 4rem;      /* 64 */
  --space-20: 5rem;      /* 80 */
  --space-24: 6rem;      /* 96 */
  --space-32: 8rem;      /* 128 */


  /* ═══ RADIUS ═══════════════════════════════════════════════════════════
     Replaces the old global `* { border-radius: 0 !important }`. */

  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  22px;
  --radius-3xl:  32px;
  --radius-full: 9999px;


  /* ═══ ELEVATION ════════════════════════════════════════════════════════
     On dark surfaces a drop shadow alone reads as mud, so each level pairs a
     shadow with a 1px inset top highlight to catch an implied light source. */

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.36), 0 2px 4px -1px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 12px 26px -6px rgba(0, 0, 0, 0.44), 0 4px 10px -3px rgba(0, 0, 0, 0.28);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.55), 0 8px 18px -6px rgba(0, 0, 0, 0.32);
  --shadow-2xl: 0 40px 80px -20px rgba(0, 0, 0, 0.65), 0 12px 28px -8px rgba(0, 0, 0, 0.38);

  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --highlight-top-strong: inset 0 1px 0 rgba(255, 255, 255, 0.11);

  --ring-focus: 0 0 0 3px rgba(100, 200, 93, 0.32);
  --ring-danger: 0 0 0 3px rgba(229, 72, 77, 0.30);
  --glow-brand: 0 0 0 1px rgba(100, 200, 93, 0.35), 0 4px 18px -4px rgba(100, 200, 93, 0.32);


  /* ═══ MOTION ═══════════════════════════════════════════════════════════ */

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    340ms;
  --dur-slower:  520ms;

  --ease-out:     cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:      cubic-bezier(0.55, 0, 1, 0.45);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-linear:  linear;

  --transition-colors: color var(--dur-fast) var(--ease-out),
                       background-color var(--dur-fast) var(--ease-out),
                       border-color var(--dur-fast) var(--ease-out);
  --transition-transform: transform var(--dur-normal) var(--ease-out);
  --transition-all: all var(--dur-fast) var(--ease-out);


  /* ═══ Z-INDEX ══════════════════════════════════════════════════════════
     Deliberately aligned to Bootstrap's own ladder (dropdown 1000,
     fixed 1030, modal 1055, popover 1070, tooltip 1080) so our chrome and
     Bootstrap's components interleave correctly instead of fighting. */

  --z-below:          -1;
  --z-base:           0;
  --z-raised:         1;
  --z-sticky:         1020;
  --z-sidebar:        1025;
  --z-topbar:         1030;
  --z-dropdown:       1000;
  --z-offcanvas:      1045;
  --z-modal-backdrop: 1050;
  --z-modal:          1055;
  --z-palette:        1060;
  --z-popover:        1070;
  --z-tooltip:        1080;
  --z-toast:          1090;
  --z-max:            2147483647;


  /* ═══ LAYOUT METRICS ═══════════════════════════════════════════════════ */

  --sidebar-w:           264px;
  --sidebar-w-collapsed: 64px;
  --topbar-h:            56px;
  --subbar-h:            44px;
  --content-max:         1520px;
  --prose-max:           68ch;
  --gutter:              var(--space-6);
  --gutter-sm:           var(--space-4);


  /* ═══ BOOTSTRAP BRIDGE ═════════════════════════════════════════════════
     Reassigning Bootstrap's variables is what carries the system into every
     Bootstrap component site-wide — cards, tables, forms, modals, alerts,
     dropdowns, pagination, badges — with no per-component overrides. */

  --bs-body-bg:        var(--surface-base);
  --bs-body-color:     var(--text-secondary);
  --bs-body-font-family: var(--font-sans);
  --bs-body-font-size: var(--fs-body);
  --bs-body-font-weight: var(--fw-regular);
  --bs-body-line-height: var(--lh-normal);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-tertiary);
  --bs-heading-color:  var(--text-primary);

  --bs-font-sans-serif: var(--font-sans);
  --bs-font-monospace:  var(--font-mono);

  --bs-border-color:           var(--border-default);
  --bs-border-color-translucent: var(--border-subtle);
  --bs-border-width:           1px;
  --bs-border-radius:          var(--radius-md);
  --bs-border-radius-sm:       var(--radius-sm);
  --bs-border-radius-lg:       var(--radius-lg);
  --bs-border-radius-xl:       var(--radius-xl);
  --bs-border-radius-xxl:      var(--radius-2xl);
  --bs-border-radius-pill:     var(--radius-full);

  --bs-primary:   var(--bd-green-500);
  --bs-secondary: var(--bd-neutral-500);
  --bs-success:   var(--bd-green-500);
  --bs-info:      var(--bd-teal-500);
  --bs-warning:   var(--bd-amber-500);
  --bs-danger:    var(--bd-red-500);
  --bs-light:     var(--bd-neutral-100);
  --bs-dark:      var(--bd-neutral-900);

  --bs-primary-rgb:   100, 200, 93;
  --bs-secondary-rgb: 63, 114, 128;
  --bs-success-rgb:   100, 200, 93;
  --bs-info-rgb:      79, 195, 195;
  --bs-warning-rgb:   248, 166, 47;
  --bs-danger-rgb:    229, 72, 77;
  --bs-light-rgb:     220, 234, 238;
  --bs-dark-rgb:      14, 29, 35;
  --bs-body-bg-rgb:   10, 22, 27;
  --bs-body-color-rgb: 169, 199, 208;

  --bs-link-color:              var(--brand);
  --bs-link-hover-color:        var(--brand-hover);
  --bs-link-color-rgb:          100, 200, 93;
  --bs-link-hover-color-rgb:    133, 214, 126;
  --bs-code-color:              var(--bd-teal-400);
  --bs-highlight-bg:            var(--brand-subtle);

  --bs-box-shadow:    var(--shadow-md);
  --bs-box-shadow-sm: var(--shadow-sm);
  --bs-box-shadow-lg: var(--shadow-lg);

  /* Bootstrap components inherit these directly */
  --bs-card-bg:               var(--surface-2);
  --bs-card-border-color:     var(--border-subtle);
  --bs-card-color:            var(--text-secondary);
  --bs-card-cap-bg:           transparent;

  --bs-table-bg:              transparent;
  --bs-table-color:           var(--text-secondary);
  --bs-table-border-color:    var(--border-subtle);
  --bs-table-striped-bg:      rgba(255, 255, 255, 0.022);
  --bs-table-striped-color:   var(--text-secondary);
  --bs-table-hover-bg:        var(--surface-hover);
  --bs-table-hover-color:     var(--text-primary);
  --bs-table-active-bg:       var(--surface-active);

  --bs-modal-bg:              var(--surface-3);
  --bs-modal-border-color:    var(--border-default);
  --bs-modal-color:           var(--text-secondary);
  --bs-modal-header-border-color: var(--border-subtle);
  --bs-modal-footer-border-color: var(--border-subtle);

  --bs-dropdown-bg:           var(--surface-4);
  --bs-dropdown-border-color: var(--border-default);
  --bs-dropdown-color:        var(--text-secondary);
  --bs-dropdown-link-color:   var(--text-secondary);
  --bs-dropdown-link-hover-color: var(--text-primary);
  --bs-dropdown-link-hover-bg: var(--surface-hover);
  --bs-dropdown-link-active-bg: var(--brand-subtle);
  --bs-dropdown-link-active-color: var(--brand);
  --bs-dropdown-divider-bg:   var(--border-subtle);
  --bs-dropdown-border-radius: var(--radius-lg);

  --bs-offcanvas-bg:          var(--surface-1);
  --bs-offcanvas-color:       var(--text-secondary);
  --bs-offcanvas-border-color: var(--border-subtle);
  --bs-offcanvas-width:       min(320px, 88vw);

  --bs-pagination-bg:         transparent;
  --bs-pagination-color:      var(--text-secondary);
  --bs-pagination-border-color: var(--border-default);
  --bs-pagination-hover-bg:   var(--surface-hover);
  --bs-pagination-hover-color: var(--text-primary);
  --bs-pagination-hover-border-color: var(--border-strong);
  --bs-pagination-active-bg:  var(--brand);
  --bs-pagination-active-color: var(--text-on-brand);
  --bs-pagination-active-border-color: var(--brand);
  --bs-pagination-disabled-bg: transparent;
  --bs-pagination-disabled-color: var(--text-disabled);
  --bs-pagination-disabled-border-color: var(--border-subtle);
  --bs-pagination-focus-bg:   var(--surface-hover);
  --bs-pagination-focus-box-shadow: var(--ring-focus);

  --bs-nav-link-color:        var(--text-secondary);
  --bs-nav-link-hover-color:  var(--text-primary);
  --bs-nav-tabs-border-color: var(--border-subtle);
  --bs-nav-tabs-link-active-color: var(--text-primary);
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-hover-border-color: transparent;

  --bs-tooltip-bg:            var(--bd-neutral-990);
  --bs-tooltip-color:         var(--text-primary);
  --bs-tooltip-opacity:       1;
  --bs-tooltip-border-radius: var(--radius-sm);
  --bs-tooltip-font-size:     var(--fs-xs);

  --bs-popover-bg:            var(--surface-4);
  --bs-popover-border-color:  var(--border-default);
  --bs-popover-header-bg:     var(--surface-5);

  --bs-accordion-bg:          transparent;
  --bs-accordion-border-color: var(--border-subtle);
  --bs-accordion-btn-color:   var(--text-primary);
  --bs-accordion-active-bg:   var(--brand-subtle);
  --bs-accordion-active-color: var(--brand);

  --bs-progress-bg:           var(--surface-4);
  --bs-progress-bar-bg:       var(--brand);
  --bs-progress-height:       6px;
  --bs-progress-border-radius: var(--radius-full);

  --bs-list-group-bg:         transparent;
  --bs-list-group-color:      var(--text-secondary);
  --bs-list-group-border-color: var(--border-subtle);
  --bs-list-group-hover-bg:   var(--surface-hover);
  --bs-list-group-action-color: var(--text-secondary);
  --bs-list-group-action-hover-color: var(--text-primary);
  --bs-list-group-active-bg:  var(--brand-subtle);
  --bs-list-group-active-color: var(--brand);
  --bs-list-group-active-border-color: var(--border-brand);

  --bs-breadcrumb-divider-color: var(--text-disabled);
  --bs-breadcrumb-item-active-color: var(--text-primary);
  --bs-breadcrumb-font-size:  var(--fs-sm);

  --bs-focus-ring-color:      rgba(100, 200, 93, 0.32);
  --bs-focus-ring-width:      3px;
  --bs-focus-ring-opacity:    1;
}


/* ─── Reduced motion ────────────────────────────────────────────────────────
   Collapse every duration token to a hair rather than 0s: instant-but-present
   keeps state changes legible for anyone relying on them, while removing the
   vestibular trigger that animation causes. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 1ms;
    --dur-fast:    1ms;
    --dur-normal:  1ms;
    --dur-slow:    1ms;
    --dur-slower:  1ms;
    --ease-spring: linear;
  }
}


/* ─── Denser metrics on small screens ──────────────────────────────────── */
@media (max-width: 767.98px) {
  :root {
    --gutter: var(--space-4);
    --topbar-h: 52px;
    --fs-2xl: 1.375rem;
    --fs-3xl: 1.75rem;
    --fs-4xl: 2.125rem;
    --fs-5xl: 2.5rem;
    --fs-6xl: 3rem;
  }
}