/* ==========================================================================
   TrackFlo design tokens (8.10.26)

   The ONLY file in static/css/tf-*.css allowed to contain a hex literal.
   Everything else reads var(--…) so it responds to the theme.

   Light values live on :root. The dark block redefines only what must change.
   Brand constants (--tf-ink/green/blue) and geometry (--tf-radius, --tf-tile-h)
   are deliberately theme-invariant and appear once.

   Bootstrap 5.3 reads its own --bs-* variables, so overriding them here re-themes
   cards, tables, forms, modals, dropdowns, offcanvas and pagination for free.
   ========================================================================== */

:root {
  /* --- surfaces and text (Bootstrap's own vars) --- */
  --bs-body-bg:         #f7f8fa;  /* was #fff: white cards on a white body barely read */
  --bs-body-color:      #1E2027;
  --bs-secondary-bg:    #ffffff;  /* card surface */
  --bs-tertiary-bg:     #f3f4f6;  /* wells, hovers, raised strips */
  --tf-nav-bg:          #e2e5ea;  /* the nav band gets its OWN token (gate round 3): it
                                     wants to be a real step darker than the body without
                                     dragging every well and hover state with it */
  --bs-border-color:    #e5e7eb;
  --bs-secondary-color: #6b7280;  /* muted text */

  /* Links. Bootstrap colors anchors via rgba(var(--bs-link-color-rgb), …) in several
     contexts, which outruns tf-base's plain `a` rule (dark-mode stop addresses rendered
     black, gate feedback 8.10.26). Overriding the tokens fixes every context at once. */
  --bs-link-color:       #1E2027;
  --bs-link-color-rgb:   30, 32, 39;
  --bs-link-hover-color: #1E2027;
  --bs-link-hover-color-rgb: 30, 32, 39;

  /* --- brand (theme-invariant) --- */
  --tf-ink:            #1E2027;
  --tf-on-ink:         #f5f6f8;  /* text ON the ink surface. NOT --bs-secondary-bg: that
                                    token goes dark in dark mode, which made every
                                    ink-background element (active tabs, fancy buttons,
                                    hover tips) render dark-on-dark. Ink never changes,
                                    so its text color must not either. */
  --tf-green:          #91E18A;
  --tf-blue:           #57B1FF;
  --tf-brand-gradient: linear-gradient(to left, #91E18A, #57B1FF);

  /* --- brand, legible-on-surface variants (THEMED) ---
     #91E18A and #57B1FF are fills for dark surfaces; neither clears contrast as an
     icon or link on a light background (gate review 8.10.26). These darken in light
     mode and return to the true brand values in dark. Green deepened again in gate
     round 3: the duotone layers need to contrast with EACH OTHER, so the primary
     layer goes deep while the secondary blue stays mid-tone at 0.6 opacity. */
  --tf-green-strong: #35792f;
  --tf-blue-strong:  #2176cc;

  /* --- status. Foreground + a tinted background for badges/cells. ---
     --tf-ok darkened from the legacy #739c39 (gate review 8.10.26): the old value was
     3.2:1 under white cell text and 3.0:1 as text on the page — both under WCAG AA.
     #567529 clears 4.5:1 in both roles and stays in the same olive family. */
  --tf-ok:      #567529;
  --tf-ok-bg:   #f0fdf4;
  --tf-warn:    #FFBF00;
  --tf-warn-bg: #fef3c7;
  --tf-danger:      #D2222D;
  --tf-danger-bg:   #fee2e2;
  --tf-neutral:     #6c757d;
  --tf-neutral-bg:  #f3f4f6;

  /* --- onboarding brand rail (theme-invariant): a deliberate green-gradient panel on
     the first page every customer sees; it does not follow the theme. --- */
  --tf-onboard-rail-a: #1f8f4e;
  --tf-onboard-rail-b: #137a52;

  /* --- type scale (theme-invariant). Page titles at h3 weight instead of the old
     display-5 (3rem) headlines; heroes are DATA (load numbers, entity names). --- */
  --tf-text-page-title: 1.5rem;
  --tf-text-hero:       4.5rem;  /* load numbers / entity names — kept at the old
                                    display-2 scale by request; page TITLES are the
                                    thing that shrank */
  --tf-text-auth-title: 3.5rem;  /* sign-in is a landing screen, not an admin header:
                                    the title carries the page under a 200px logo, so
                                    it keeps its pre-sweep display-4 size */

  /* --- geometry (theme-invariant) --- */
  --tf-radius:    12px;
  --tf-radius-sm: 8px;
  --tf-tile-h:    125px;
  --tf-tile-h-lg: 175px;

  /* --- elevation --- */
  --tf-shadow:       0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
  --tf-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
}

[data-bs-theme="dark"] {
  --bs-body-bg:         #15161a;
  --bs-body-color:      #E0E7F5;
  --bs-secondary-bg:    #22242b;  /* card surface */
  --bs-tertiary-bg:     #1E2027;  /* brand ink becomes the nav band */
  --bs-border-color:    #32343d;
  --bs-secondary-color: #9ba1ac;
  --bs-link-color:       #E0E7F5;
  --bs-link-color-rgb:   224, 231, 245;
  --bs-link-hover-color: #E0E7F5;
  --bs-link-hover-color-rgb: 224, 231, 245;

  /* On dark surfaces the true brand values are already legible. */
  --tf-green-strong: #91E18A;
  --tf-blue-strong:  #57B1FF;
  --tf-nav-bg:       #1E2027;   /* brand ink band — also what classic inherits */

  /* Status colors MUST shift: #739c39 and #D2222D are both unreadable on #15161a. */
  --tf-ok:      #86c443;
  --tf-ok-bg:   #14301c;
  --tf-warn:    #fbbf24;
  --tf-warn-bg: #3a2c05;
  --tf-danger:      #f87171;
  --tf-danger-bg:   #3a1416;
  --tf-neutral:     #9aa1ac;
  --tf-neutral-bg:  #24262d;

  --tf-shadow:       0 1px 3px 0 rgb(0 0 0 / .5);
  --tf-shadow-hover: 0 4px 10px -1px rgb(0 0 0 / .6);
}