/*
 * ttt-tokens.css — Design token bridge.
 * Provides all CSS custom properties that main.css, batch.css, and sweetalert2-overrides.css
 * reference as --bs-* names. Previously provided by bootstrap.min.css.
 * Transition: --ttt-* are the new canonical names; --bs-* aliases point to them.
 */

/* Prevent Alpine.js flash of unstyled content */
[x-cloak] { display: none !important; }

/* ─── Light theme ─────────────────────────────────────────────────────────── */
:root {

  /* Brand: Primary (TTT blue) */
  --ttt-primary:                    #1b4a8f;
  --ttt-primary-rgb:                27, 74, 143;
  --ttt-primary-rgb-hover:          22, 64, 117;
  --ttt-primary-text-emphasis:      #0f2f5c;
  --ttt-primary-bg-subtle:          #e8eef7;
  --ttt-primary-border-subtle:      #a3b8d9;

  /* Brand: Links */
  --ttt-link-color:                 #1d4686;
  --ttt-link-color-rgb:             29, 70, 134;
  --ttt-link-hover-color:           #183a6f;
  --ttt-link-hover-color-rgb:       24, 58, 111;
  --ttt-focus-ring-color:           rgba(27, 74, 143, 0.25);

  /* Brand: Success (TTT green) */
  --ttt-success:                    #095c36;
  --ttt-success-rgb:                9, 92, 54;
  --ttt-success-rgb-hover:          7, 66, 40;
  --ttt-success-text-emphasis:      #042e1b;
  --ttt-success-bg-subtle:          #e6f3ed;
  --ttt-success-border-subtle:      #7aad93;
  --ttt-form-valid-color:           #095c36;
  --ttt-form-valid-border-color:    #095c36;

  /* Semantic */
  --ttt-danger:                     #dc3545;
  --ttt-danger-border-subtle:       transparent;
  --ttt-warning-text-emphasis:      #664d03;
  --ttt-info-text-emphasis:         #055160;

  /* Typography */
  --ttt-code-color:                 #9a255f;
  --ttt-heading-color:              #9f2632;

  /* Surfaces — light */
  --ttt-body-bg:                    #ffffff;
  --ttt-body-bg-rgb:                255, 255, 255;
  --ttt-body-color:                 #212529;
  --ttt-body-color-rgb:             33, 37, 41;
  --ttt-secondary-bg:               #e9ecef;
  --ttt-secondary-bg-rgb:           233, 236, 239;
  --ttt-tertiary-bg:                #f8f9fa;
  --ttt-tertiary-bg-rgb:            248, 249, 250;
  --ttt-border-color:               #dee2e6;
  --ttt-secondary-color:            #4a565f;
  --ttt-secondary-color-rgb:        74, 86, 95;
  --ttt-tertiary-color:             rgba(108, 117, 125, 0.75);
  --ttt-emphasis-color:             #000000;
  --ttt-emphasis-color-rgb:         0, 0, 0;

  /* Shadows & radii (Bootstrap defaults) */
  --ttt-box-shadow:                 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --ttt-box-shadow-lg:              0 1rem 3rem rgba(0, 0, 0, 0.175);
  --ttt-border-radius:              0.375rem;
  --ttt-border-radius-lg:           0.5rem;

  /* Button base tokens (used by sweetalert2-overrides.css) */
  --ttt-btn-padding-y:              0.375rem;
  --ttt-btn-padding-x:              0.75rem;
  --ttt-btn-font-size:              1rem;
  --ttt-btn-font-weight:            400;
  --ttt-btn-line-height:            1.5;
  --ttt-btn-border-radius:          0.375rem;
  --ttt-btn-border-width:           1px;
  --ttt-btn-box-shadow:             inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);

  /* ── Bootstrap aliases (transitional: existing CSS files use --bs-* names) ─ */
  --bs-blue:                        var(--ttt-primary);
  --bs-primary:                     var(--ttt-primary);
  --bs-primary-rgb:                 var(--ttt-primary-rgb);
  --bs-primary-rgb-hover:           var(--ttt-primary-rgb-hover);
  --bs-primary-text-emphasis:       var(--ttt-primary-text-emphasis);
  --bs-primary-bg-subtle:           var(--ttt-primary-bg-subtle);
  --bs-primary-border-subtle:       var(--ttt-primary-border-subtle);
  --bs-link-color:                  var(--ttt-link-color);
  --bs-link-color-rgb:              var(--ttt-link-color-rgb);
  --bs-link-hover-color:            var(--ttt-link-hover-color);
  --bs-link-hover-color-rgb:        var(--ttt-link-hover-color-rgb);
  --bs-focus-ring-color:            var(--ttt-focus-ring-color);
  --bs-green:                       var(--ttt-success);
  --bs-success:                     var(--ttt-success);
  --bs-success-rgb:                 var(--ttt-success-rgb);
  --bs-success-rgb-hover:           var(--ttt-success-rgb-hover);
  --bs-success-text-emphasis:       var(--ttt-success-text-emphasis);
  --bs-success-bg-subtle:           var(--ttt-success-bg-subtle);
  --bs-success-border-subtle:       var(--ttt-success-border-subtle);
  --bs-form-valid-color:            var(--ttt-form-valid-color);
  --bs-form-valid-border-color:     var(--ttt-form-valid-border-color);
  --bs-danger:                      var(--ttt-danger);
  --bs-danger-border-subtle:        var(--ttt-danger-border-subtle);
  --bs-warning-text-emphasis:       var(--ttt-warning-text-emphasis);
  --bs-info-text-emphasis:          var(--ttt-info-text-emphasis);
  --bs-code-color:                  var(--ttt-code-color);
  --bs-secondary-color:             var(--ttt-secondary-color);
  --bs-secondary-color-rgb:         var(--ttt-secondary-color-rgb);
  --heading-color:                  var(--ttt-heading-color);
  --bs-body-bg:                     var(--ttt-body-bg);
  --bs-body-bg-rgb:                 var(--ttt-body-bg-rgb);
  --bs-body-color:                  var(--ttt-body-color);
  --bs-body-color-rgb:              var(--ttt-body-color-rgb);
  --bs-secondary-bg:                var(--ttt-secondary-bg);
  --bs-secondary-bg-rgb:            var(--ttt-secondary-bg-rgb);
  --bs-tertiary-bg:                 var(--ttt-tertiary-bg);
  --bs-tertiary-bg-rgb:             var(--ttt-tertiary-bg-rgb);
  --bs-border-color:                var(--ttt-border-color);
  --bs-tertiary-color:              var(--ttt-tertiary-color);
  --bs-emphasis-color:              var(--ttt-emphasis-color);
  --bs-emphasis-color-rgb:          var(--ttt-emphasis-color-rgb);
  --bs-box-shadow:                  var(--ttt-box-shadow);
  --bs-box-shadow-lg:               var(--ttt-box-shadow-lg);
  --bs-border-radius:               var(--ttt-border-radius);
  --bs-border-radius-lg:            var(--ttt-border-radius-lg);
  --bs-btn-padding-y:               var(--ttt-btn-padding-y);
  --bs-btn-padding-x:               var(--ttt-btn-padding-x);
  --bs-btn-font-size:               var(--ttt-btn-font-size);
  --bs-btn-font-weight:             var(--ttt-btn-font-weight);
  --bs-btn-line-height:             var(--ttt-btn-line-height);
  --bs-btn-border-radius:           var(--ttt-btn-border-radius);
  --bs-btn-border-width:            var(--ttt-btn-btn-border-width, 1px);
  --bs-btn-box-shadow:              var(--ttt-btn-box-shadow);
}

/* ─── Dark theme ──────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {

  /* Brand overrides */
  --ttt-primary-rgb-hover:          148, 191, 255;
  --ttt-primary-text-emphasis:      #94bfff;
  --ttt-primary-bg-subtle:          #1a2438;
  --ttt-primary-border-subtle:      #3d5a85;
  --ttt-link-color:                 #86c2ff;
  --ttt-link-color-rgb:             134, 194, 255;
  --ttt-link-hover-color:           #6ca1e2;
  --ttt-link-hover-color-rgb:       108, 161, 226;
  --ttt-focus-ring-color:           rgba(148, 191, 255, 0.28);
  --ttt-success-rgb-hover:          198, 236, 214;
  --ttt-success-text-emphasis:      #9edabe;
  --ttt-success-bg-subtle:          #0d2118;
  --ttt-success-border-subtle:      #1a5a3c;
  --ttt-form-valid-color:           #8abf9f;
  --ttt-form-valid-border-color:    #6aab87;
  --ttt-code-color:                 #d7b4ce;
  --ttt-heading-color:              #ff6271;

  /* Surfaces — dark */
  --ttt-body-bg:                    #26292e;
  --ttt-body-bg-rgb:                38, 41, 46;
  --ttt-body-color:                 #f8f9fa;
  --ttt-body-color-rgb:             248, 249, 250;
  --ttt-secondary-bg:               #30343a;
  --ttt-secondary-bg-rgb:           48, 52, 58;
  --ttt-tertiary-bg:                #2a2e33;
  --ttt-tertiary-bg-rgb:            42, 46, 51;
  --ttt-border-color:               rgba(255, 255, 255, 0.15);
  --ttt-secondary-color:            #bebebe;
  --ttt-secondary-color-rgb:        190, 190, 190;
  --ttt-tertiary-color:             rgba(173, 181, 189, 0.7);
  --ttt-emphasis-color:             #ffffff;
  --ttt-emphasis-color-rgb:         255, 255, 255;
  --ttt-warning-text-emphasis:      #ffda6a;
  --ttt-info-text-emphasis:         #6edff6;

  /* Shadows dark */
  --ttt-box-shadow:                 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  --ttt-box-shadow-lg:              0 1rem 3rem rgba(0, 0, 0, 0.45);

  /* ── Bootstrap aliases (dark) ─────────────────────────────────────────────
     The :root aliases above point to --ttt-* vars, which cascade. However we
     re-declare a subset that main.css also re-declares in [data-bs-theme="dark"]
     to ensure specificity matching is preserved if main.css is removed later. */
  --bs-primary-rgb-hover:           var(--ttt-primary-rgb-hover);
  --bs-primary-text-emphasis:       var(--ttt-primary-text-emphasis);
  --bs-primary-bg-subtle:           var(--ttt-primary-bg-subtle);
  --bs-primary-border-subtle:       var(--ttt-primary-border-subtle);
  --bs-link-color:                  var(--ttt-link-color);
  --bs-link-color-rgb:              var(--ttt-link-color-rgb);
  --bs-link-hover-color:            var(--ttt-link-hover-color);
  --bs-link-hover-color-rgb:        var(--ttt-link-hover-color-rgb);
  --bs-focus-ring-color:            var(--ttt-focus-ring-color);
  --bs-success-rgb-hover:           var(--ttt-success-rgb-hover);
  --bs-success-text-emphasis:       var(--ttt-success-text-emphasis);
  --bs-success-bg-subtle:           var(--ttt-success-bg-subtle);
  --bs-success-border-subtle:       var(--ttt-success-border-subtle);
  --bs-form-valid-color:            var(--ttt-form-valid-color);
  --bs-form-valid-border-color:     var(--ttt-form-valid-border-color);
  --bs-code-color:                  var(--ttt-code-color);
  --bs-secondary-color:             var(--ttt-secondary-color);
  --heading-color:                  var(--ttt-heading-color);
  --bs-body-bg:                     var(--ttt-body-bg);
  --bs-body-bg-rgb:                 var(--ttt-body-bg-rgb);
  --bs-body-color:                  var(--ttt-body-color);
  --bs-body-color-rgb:              var(--ttt-body-color-rgb);
  --bs-secondary-bg:                var(--ttt-secondary-bg);
  --bs-secondary-bg-rgb:            var(--ttt-secondary-bg-rgb);
  --bs-tertiary-bg:                 var(--ttt-tertiary-bg);
  --bs-tertiary-bg-rgb:             var(--ttt-tertiary-bg-rgb);
  --bs-border-color:                var(--ttt-border-color);
  --bs-secondary-color-rgb:         var(--ttt-secondary-color-rgb);
  --bs-tertiary-color:              var(--ttt-tertiary-color);
  --bs-emphasis-color:              var(--ttt-emphasis-color);
  --bs-emphasis-color-rgb:          var(--ttt-emphasis-color-rgb);
  --bs-warning-text-emphasis:       var(--ttt-warning-text-emphasis);
  --bs-info-text-emphasis:          var(--ttt-info-text-emphasis);
  --bs-box-shadow:                  var(--ttt-box-shadow);
  --bs-box-shadow-lg:               var(--ttt-box-shadow-lg);
  --bs-danger-border-subtle:        transparent;
}