/* ==========================================================================
   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 */

  /* --- form controls (8.12.26) ---
     Bootstrap fills .form-control with --bs-body-bg, so an input sitting directly on
     the page (sign-in, signup, password reset) was EXACTLY the page color, hairlined
     by a border lighter than the body. The field read as nothing at all. Inputs get
     their own surface + border so they read as a field on the body AND on a card.
     --tf-input-border is deliberately a mid gray, not --bs-border-color: WCAG wants
     3:1 for a non-text UI boundary and #e5e7eb is ~1.1:1 on the body. */
  --tf-input-bg:     #ffffff;  /* brighter than the #f7f8fa body; the border carries it on a white card */
  --tf-input-border: #868e9c;  /* 3.1:1 on the body, 3.4:1 on a card */

  /* 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);
  --tf-whatsapp:       #25D366;  /* WhatsApp's own brand green, for its channel icon */

  /* --- 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;
  --tf-blue-strong-rgb: 33, 118, 204;  /* for the input focus ring's alpha */

  /* --- outline-button face (THEMED, 8.13.26) ---
     .btn-primary is an OUTLINE button: transparent fill, ink text and border, inverting
     to filled-ink on hover. It read the theme-invariant --tf-ink directly, so in dark
     mode the button was #1E2027 text on a #15161a page — invisible (gate feedback:
     "Save Changes button is invisible" on Exception Alerts). The face has to follow the
     surface, so it gets its own themed pair: -face is the resting text+border, and
     -face-contrast is the text once the face becomes the fill on hover. */
  --tf-btn-face:          #1E2027;  /* = --tf-ink */
  --tf-btn-face-contrast: #f5f6f8;  /* = --tf-on-ink */

  /* --- 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;

  /* Inputs go LIGHTER than both the body (#15161a) and the card (#22242b) so the field
     reads as a raised well on either surface. #E0E7F5 on it clears 10:1. */
  --tf-input-bg:     #2b2e37;
  --tf-input-border: #6b7280;

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

  /* The outline button flips: light face on the dark page, ink text once filled. */
  --tf-btn-face:          #f5f6f8;
  --tf-btn-face-contrast: #1E2027;

  /* 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);
}