/* ===========================================================
   VerityRadar — Design Tokens (single source of truth).
   Inspired by WiseTech Global's brand system (DM Sans, sky-blue
   primary, indigo hero/footer, white-first surfaces). See
   docs/brand/wisetech-inspired-brand-book.md for the source of
   every value below. To reskin the site, edit values in :root
   only. No raw hex/rgba should appear in any rule below or in
   any other stylesheet.
   =========================================================== */
:root {
  /* --- Brand (raw hex) --- */
  --vr-brand-primary:   #1e7fd4;  /* signal blue — primary CTA, links */
  --vr-brand-primary-h: #4d97e0;  /* CTA hover */
  --vr-brand-primary-a: #0a64bd;  /* CTA active/focus */
  --vr-brand-primary-ll:#6db0ea;  /* CTA gradient light-lift stop */
  --vr-brand-deep:      #1a1856;  /* deep indigo — hero band, footer, focus border */
  --vr-brand-deep-2:    #2e21d2;  /* secondary accent / product chips */
  --vr-brand-splash:    #201b79;  /* PWA splash + favicon disc bg (slightly lighter than deep) */
  --vr-brand-cyan:      #5fcce6;  /* cool-air accent — quiet accent strips */
  --vr-brand-cyan-lo:   #a8e6f5;  /* cyan light tint — gradient stops on dark */
  --vr-brand-cyan-dk:   #3fb6d6;  /* cyan dark tint — gradient stops on dark */
  --vr-brand-cyan-pale: #c9eff7;  /* cyan hover-gradient top stop */
  --vr-brand-cyan-mid:  #8ddcee;  /* cyan hover-gradient mid stop */
  --vr-brand-mauve:     #b3a0e8;  /* footer headings */
  --vr-brand-lavender:  #aeb0f5;  /* decorative panels, badges */
  --vr-brand-dash:      #3934d2;  /* decorative dash pattern */

  /* --- Neutrals --- */
  --vr-ink:         #0e2942;      /* body & heading colour */
  --vr-ink-soft:    #212529;      /* tables, code */
  --vr-muted:       #6c757d;      /* secondary text */
  --vr-border:      #dee2e6;      /* form/table borders */
  --vr-border-2:    #bfc2c5;      /* hr / strong border */
  --vr-placeholder: #cfd4da;

  /* --- Surfaces --- */
  --vr-bg:           #ffffff;     /* dominant body surface */
  --vr-bg-alt:       #fafaf9;     /* light section band */
  --vr-bg-shell:     #f5f5f5;     /* shell / grey-card */
  --vr-bg-soft-blue: #ebeefa;     /* faint blue strip */
  --vr-bg-hero:      #1a1856;     /* marketing hero band */

  /* --- Semantic (Bootstrap-inherited, used unchanged) --- */
  --vr-success:    #28a745;
  --vr-success-dk: #1a6e32;  /* AA-readable success text on tinted-light pill */
  --vr-warn:       #ffc107;
  --vr-danger:     #dc3545;
  --vr-danger-dk:  #a12431;  /* AA-readable danger text on tinted-light pill */
  --vr-info:       #17a2b8;

  /* --- Typography --- */
  --vr-font-sans: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --vr-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas,
                  "Liberation Mono", "Courier New", monospace;
  --vr-fs-body:        15px;
  --vr-lh-body:        1.47;
  --vr-fs-lead:        18px;
  --vr-fs-eyebrow:     12px;
  --vr-tracking-eyebrow: 2px;
  --vr-fs-h2-mob:      25px;
  --vr-fs-h2:          36px;
  --vr-fs-h2-xl:       50px;
  --vr-fs-h3:          32px;
  --vr-fs-h4:          24px;
  --vr-fs-h5:          18px;
  --vr-fs-h6:          15px;

  /* --- Layout --- */
  --vr-content-max:    1340px;
  --vr-gutter-mob:     25px;
  --vr-gutter-desk:    15px;
  --vr-section-pad:    60px;
  --vr-section-pad-lg: 100px;

  /* --- Components --- */
  --vr-btn-radius:        0;
  --vr-btn-pad:           20px 50px;
  --vr-btn-fs:            15px;
  --vr-btn-tracking:      -0.15px;
  --vr-btn-bg:            var(--vr-brand-primary);
  --vr-btn-bg-h:          var(--vr-brand-primary-h);
  --vr-btn-bg-a:          var(--vr-brand-primary-a);
  --vr-btn-fg:            #ffffff;

  --vr-card-radius:       0;          /* default white-card */
  --vr-card-radius-emph:  4px;        /* coloured cards */
  --vr-card-pad:          20px;
  --vr-card-pad-emph:     32px 24px 24px 24px;
  --vr-card-shadow:       none;

  --vr-input-radius:        0;
  --vr-input-border:        var(--vr-border);
  --vr-input-focus-border:  var(--vr-brand-deep);
  --vr-input-placeholder:   var(--vr-placeholder);

  --vr-nav-bg:            var(--vr-bg);
  --vr-nav-link:          var(--vr-ink);
  --vr-nav-link-hover:    var(--vr-brand-primary);
  --vr-nav-height:        72px;

  --vr-footer-bg:         var(--vr-brand-deep);
  --vr-footer-fg:         #ffffff;
  --vr-footer-fg-dim:     rgba(255, 255, 255, .72);
  --vr-footer-fg-faint:   rgba(255, 255, 255, .55);
  --vr-footer-rule:       rgba(255, 255, 255, .16);
  --vr-footer-heading:    var(--vr-brand-mauve);
  --vr-footer-link-hover: var(--vr-brand-primary);

  /* --- Motion (WiseTech: 150ms ease-in-out on colour only) --- */
  --vr-ease:      ease-in-out;
  --vr-dur:       150ms;
  --vr-transition: color var(--vr-dur) var(--vr-ease),
                   background-color var(--vr-dur) var(--vr-ease),
                   border-color var(--vr-dur) var(--vr-ease);

  /* ===========================================================
     Legacy semantic tokens — kept so existing pages keep working
     after the palette inversion (dark → light). Re-mapped to the
     new white-first palette. New CSS should use --vr-* tokens.
     =========================================================== */

  /* Surfaces */
  --bg:               var(--vr-bg);
  --bg-alt:           var(--vr-bg-alt);
  --bg-deep:          var(--vr-bg-shell);
  --gradient-hero:    linear-gradient(170deg, var(--vr-brand-deep) 0%, var(--vr-brand-deep-2) 100%);

  --surface:          var(--vr-bg);
  --surface-hov:      var(--vr-bg-alt);
  --surface-strong:   var(--vr-bg-alt);

  /* Text */
  --heading:          var(--vr-ink);
  --body:             var(--vr-ink);
  --muted:            var(--vr-muted);
  --faint:            #adb5bd;

  /* Borders */
  --border:           var(--vr-border);
  --border-soft:      #e9ecef;
  --border-strong:    var(--vr-border-2);

  /* Accents */
  --accent:           var(--vr-brand-primary);
  --accent-hov:       var(--vr-brand-primary-h);
  --accent-soft:      rgba(30,127,212,.10);
  --accent-glow:      rgba(30,127,212,.22);

  --lime:             var(--vr-brand-primary);
  --lime-dim:         var(--vr-brand-primary-h);

  /* Semantic soft tints */
  --success:          var(--vr-success);
  --success-soft:     rgba(40,167,69,.08);
  --success-border:   rgba(40,167,69,.32);
  --danger:           var(--vr-danger);
  --danger-soft:      rgba(220,53,69,.08);
  --danger-border:    rgba(220,53,69,.32);

  /* Alpha tiers — now expressed over INK (for use on light bg) */
  --alpha-1:          rgba(14,41,66,.03);
  --alpha-2:          rgba(14,41,66,.06);
  --alpha-3:          rgba(14,41,66,.10);
  --alpha-4:          rgba(14,41,66,.16);
  --alpha-5:          rgba(14,41,66,.24);

  /* Text tiers — now dark over light (was light over dark) */
  --text-1:           var(--vr-ink);
  --text-2:           var(--vr-ink);
  --text-3:           var(--vr-ink);
  --text-4:           var(--vr-muted);
  --text-5:           var(--vr-muted);

  /* Raw brand hex — legacy aliases re-mapped */
  --c-navy:           var(--vr-brand-deep);
  --c-navy-deep:      #15104a;
  --c-navy-deeper:    #110d3e;
  --c-navy-hi:        #261d8a;
  --c-white:          #ffffff;
  --c-purple:         var(--vr-brand-primary);    /* sky blue takes purple's role */
  --c-purple-hi:      var(--vr-brand-primary-h);
  --c-lime:           var(--vr-brand-primary);
  --c-lime-dim:       var(--vr-brand-primary-h);
  --c-success:        var(--vr-success);
  --c-danger:         var(--vr-danger);

  /* Nav (now WiseTech-aligned: white nav over white body) */
  --nav-bg:           var(--vr-bg);
  --nav-bg-soft:      var(--vr-bg-alt);
  --nav-bg-hov:       var(--vr-bg-shell);
  --nav-text:         var(--vr-ink);
  --nav-text-muted:   var(--vr-muted);
  --nav-text-faint:   #adb5bd;
  --nav-border:       var(--vr-border);
  --nav-border-hov:   var(--vr-border-2);
  --nav-shadow-md:    0 4px 16px rgba(14,41,66,.06), 0 1px 3px rgba(14,41,66,.04);
  --nav-shadow-lg:    -8px 0 30px rgba(14,41,66,.10);

  /* Backdrops & shadows — quiet, ink-toned */
  --backdrop:         rgba(14,41,66,.55);
  --shadow-tone:      rgba(14,41,66,.10);

  /* Sizing — WiseTech is square */
  --radius:           4px;
  --radius-sm:        0;
  --maxw:             var(--vr-content-max);
  --read-maxw:        760px;

  /* Elevation — WiseTech uses essentially none */
  --shadow-sm:        none;
  --shadow-md:        0 2px 8px rgba(14,41,66,.06);
  --shadow-lg:        0 8px 24px rgba(14,41,66,.08);
  --shadow-popup:     0 8px 28px rgba(14,41,66,.35);  /* install-prompt + popovers */
}

/* ===========================================================
   Reverse mode — applied to dark panels (hero band, footer,
   "panel-dark", "panel-deep") so the same semantic tokens
   resolve to white-on-indigo automatically. Any descendant
   uses --heading / --body / --surface etc. without knowing
   it's on dark; the override happens at the panel root.
   =========================================================== */
.panel-deep, .panel-dark, .panel-wisetechglobal-blue,
#hero, footer, .site-footer {
  /* Force descendant text colour so unstyled <p>/<li>/<td> on dark panels
     don't inherit body's --vr-ink (which renders dark-on-dark). */
  color:            rgba(255,255,255,.92);

  --heading:        #ffffff;
  --body:           rgba(255,255,255,.92);
  --muted:          rgba(255,255,255,.82);
  --faint:          rgba(255,255,255,.68);
  --text-1:         #ffffff;
  --text-2:         rgba(255,255,255,.92);
  --text-3:         rgba(255,255,255,.86);
  --text-4:         rgba(255,255,255,.74);
  --text-5:         rgba(255,255,255,.62);

  --surface:        rgba(255,255,255,.05);
  --surface-hov:    rgba(255,255,255,.09);
  --surface-strong: rgba(255,255,255,.08);

  --border:         rgba(255,255,255,.16);
  --border-soft:    rgba(255,255,255,.10);
  --border-strong:  rgba(255,255,255,.28);

  --alpha-1:        rgba(255,255,255,.04);
  --alpha-2:        rgba(255,255,255,.07);
  --alpha-3:        rgba(255,255,255,.10);
  --alpha-4:        rgba(255,255,255,.18);
  --alpha-5:        rgba(255,255,255,.28);

  --accent:         var(--vr-brand-cyan);   /* sky blue → cyan on dark for contrast */
  --accent-hov:     #b7eaf8;
  --accent-soft:    rgba(95,204,230,.16);
  --accent-glow:    rgba(95,204,230,.28);
  --lime:           var(--vr-brand-cyan);
  --lime-dim:       #b7eaf8;
}

/* ===========================================================
   Base reset + body.
   =========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--vr-font-sans);
  color: var(--vr-ink);
  background: var(--vr-bg);
  line-height: var(--vr-lh-body);
  font-size: var(--vr-fs-body);
  -webkit-font-smoothing: antialiased;
}