/* =============================================================
   Icthios Bridge — Bootstrap 5.3 theme
   Drop this AFTER bootstrap.min.css. No SCSS compile required.
   Works by overriding Bootstrap's CSS custom properties.

   Palette
     primary    #1a3540   deep teal (brand)
     info       #1ab0c4   aqua       (brand accent)
     secondary  #5a6a72   warm slate
     success    oklch(64% .13 165)
     warning    oklch(80% .14 75)
     danger     oklch(60% .16 25)
     light      #f6f4ee   warm paper
     dark       #1a3540   (= primary, for brand consistency)

   Typography: Nunito 400/600/700/800
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root,
[data-bs-theme="light"] {
  /* ---------- Brand color tokens ---------- */
  --ib-teal:        #1a3540;
  --ib-teal-700:    #122530;
  --ib-teal-800:    #0c1a23;
  --ib-teal-300:    #4d6975;
  --ib-teal-200:    #8aa0a9;
  --ib-teal-100:    #c5cfd4;
  --ib-teal-050:    #e5eaed;

  --ib-aqua:        #1ab0c4;
  --ib-aqua-700:    #138594;
  --ib-aqua-800:    #0f6772;
  --ib-aqua-300:    #6acedc;
  --ib-aqua-200:    #a0e0e9;
  --ib-aqua-100:    #d2eef3;
  --ib-aqua-050:    #ecf7fa;

  --ib-paper:       #f6f4ee;
  --ib-paper-2:     #fbfaf6;
  --ib-slate:       #5a6a72;

  /* ---------- Bootstrap theme color overrides ---------- */
  --bs-primary:        var(--ib-teal);
  --bs-primary-rgb:    26, 53, 64;
  --bs-primary-text-emphasis:    var(--ib-teal-700);
  --bs-primary-bg-subtle:        var(--ib-teal-050);
  --bs-primary-border-subtle:    var(--ib-teal-100);

  --bs-secondary:      var(--ib-slate);
  --bs-secondary-rgb:  90, 106, 114;
  --bs-secondary-text-emphasis:  #3e4a51;
  --bs-secondary-bg-subtle:      #ebedee;
  --bs-secondary-border-subtle:  #d3d8db;

  --bs-info:           var(--ib-aqua);
  --bs-info-rgb:       26, 176, 196;
  --bs-info-text-emphasis:       var(--ib-aqua-700);
  --bs-info-bg-subtle:           var(--ib-aqua-050);
  --bs-info-border-subtle:       var(--ib-aqua-100);

  --bs-success:        oklch(64% 0.13 165);
  --bs-success-rgb:    63, 161, 122;
  --bs-success-text-emphasis:    oklch(46% 0.10 165);
  --bs-success-bg-subtle:        oklch(96% 0.02 165);
  --bs-success-border-subtle:    oklch(88% 0.05 165);

  --bs-warning:        oklch(80% 0.14 75);
  --bs-warning-rgb:    220, 162, 60;
  --bs-warning-text-emphasis:    oklch(54% 0.12 75);
  --bs-warning-bg-subtle:        oklch(97% 0.03 75);
  --bs-warning-border-subtle:    oklch(90% 0.07 75);

  --bs-danger:         oklch(60% 0.16 25);
  --bs-danger-rgb:     192, 80, 70;
  --bs-danger-text-emphasis:     oklch(44% 0.14 25);
  --bs-danger-bg-subtle:         oklch(96% 0.02 25);
  --bs-danger-border-subtle:     oklch(88% 0.06 25);

  --bs-light:          var(--ib-paper);
  --bs-light-rgb:      246, 244, 238;
  --bs-light-text-emphasis:      var(--ib-teal-700);
  --bs-light-bg-subtle:          #fbfaf6;
  --bs-light-border-subtle:      #ecebe4;

  --bs-dark:           var(--ib-teal);
  --bs-dark-rgb:       26, 53, 64;
  --bs-dark-text-emphasis:       #ffffff;
  --bs-dark-bg-subtle:           var(--ib-teal-050);
  --bs-dark-border-subtle:       var(--ib-teal-100);

  /* ---------- Body & surfaces ---------- */
  --bs-body-bg:               var(--ib-paper-2);
  --bs-body-bg-rgb:           251, 250, 246;
  --bs-body-color:            var(--ib-teal);
  --bs-body-color-rgb:        26, 53, 64;
  --bs-body-secondary-color:  rgba(26, 53, 64, 0.66);
  --bs-body-tertiary-color:   rgba(26, 53, 64, 0.5);
  --bs-body-secondary-bg:     #f1efe9;
  --bs-body-tertiary-bg:      #f6f4ee;

  --bs-emphasis-color:        var(--ib-teal-800);
  --bs-emphasis-color-rgb:    12, 26, 35;

  --bs-border-color:                  rgba(26, 53, 64, 0.14);
  --bs-border-color-translucent:      rgba(26, 53, 64, 0.10);

  /* ---------- Links — pull from aqua so they pop on the calm teal field ---------- */
  --bs-link-color:        var(--ib-aqua-700);
  --bs-link-color-rgb:    19, 133, 148;
  --bs-link-hover-color:  var(--ib-aqua-800);
  --bs-link-hover-color-rgb: 15, 103, 114;

  /* ---------- Code / highlight ---------- */
  --bs-code-color:           var(--ib-aqua-800);
  --bs-highlight-bg:         var(--ib-aqua-050);

  /* ---------- Typography ---------- */
  --bs-font-sans-serif: 'Nunito', system-ui, -apple-system, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.55;

  /* ---------- Softer geometry ---------- */
  --bs-border-radius:        .625rem;   /* default 0.375 */
  --bs-border-radius-sm:     .375rem;
  --bs-border-radius-lg:     .875rem;
  --bs-border-radius-xl:     1.25rem;
  --bs-border-radius-xxl:    1.75rem;
  --bs-border-radius-pill:   50rem;

  /* ---------- Shadows — subtler, lower y-offset, brand-tinted ---------- */
  --bs-box-shadow-sm:    0 1px 2px rgba(26, 53, 64, .06);
  --bs-box-shadow:       0 4px 14px rgba(26, 53, 64, .07);
  --bs-box-shadow-lg:    0 10px 28px rgba(26, 53, 64, .09);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(26, 53, 64, .06);

  /* ---------- Form control tweaks ---------- */
  --bs-form-control-bg:           #ffffff;
  --bs-form-control-disabled-bg:  #ecebe4;
}

/* ============================================================
   Component-level polish that variables alone can't reach
   ============================================================ */

html, body { font-family: var(--bs-font-sans-serif); }

/* Headings: tighten letterspacing, give them brand color */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bs-font-sans-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ib-teal-800);
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Lead — softer */
.lead { font-weight: 500; color: rgba(26,53,64,0.78); }

/* Buttons — softer focus ring (aqua, not teal), no harsh shadow on click */
.btn {
  --bs-btn-font-weight: 600;
  letter-spacing: 0;
  border-radius: var(--bs-border-radius);
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:focus-visible,
.btn:focus {
  box-shadow: 0 0 0 .2rem rgba(26, 176, 196, .28);
}
.btn-primary {
  --bs-btn-bg: var(--ib-teal);
  --bs-btn-border-color: var(--ib-teal);
  --bs-btn-hover-bg: var(--ib-teal-700);
  --bs-btn-hover-border-color: var(--ib-teal-700);
  --bs-btn-active-bg: var(--ib-teal-800);
  --bs-btn-active-border-color: var(--ib-teal-800);
  --bs-btn-disabled-bg: var(--ib-teal-200);
  --bs-btn-disabled-border-color: var(--ib-teal-200);
}
.btn-outline-primary {
  --bs-btn-color: var(--ib-teal);
  --bs-btn-border-color: var(--ib-teal);
  --bs-btn-hover-bg: var(--ib-teal);
  --bs-btn-hover-border-color: var(--ib-teal);
  --bs-btn-active-bg: var(--ib-teal-700);
  --bs-btn-active-border-color: var(--ib-teal-700);
}
.btn-info {
  --bs-btn-bg: var(--ib-aqua);
  --bs-btn-border-color: var(--ib-aqua);
  --bs-btn-color: #ffffff;
  --bs-btn-hover-bg: var(--ib-aqua-700);
  --bs-btn-hover-border-color: var(--ib-aqua-700);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-bg: var(--ib-aqua-800);
  --bs-btn-active-border-color: var(--ib-aqua-800);
  --bs-btn-active-color: #ffffff;
}
.btn-outline-info {
  --bs-btn-color: var(--ib-aqua-700);
  --bs-btn-border-color: var(--ib-aqua);
  --bs-btn-hover-bg: var(--ib-aqua);
  --bs-btn-hover-border-color: var(--ib-aqua);
  --bs-btn-hover-color: #ffffff;
}

/* Forms — aqua focus ring */
.form-control,
.form-select {
  border-color: var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ib-aqua);
  box-shadow: 0 0 0 .2rem rgba(26, 176, 196, .22);
}
.form-check-input:focus {
  border-color: var(--ib-aqua);
  box-shadow: 0 0 0 .2rem rgba(26, 176, 196, .22);
}
.form-check-input:checked {
  background-color: var(--ib-teal);
  border-color: var(--ib-teal);
}
.form-switch .form-check-input:checked {
  background-color: var(--ib-aqua);
  border-color: var(--ib-aqua);
}
.form-range::-webkit-slider-thumb { background-color: var(--ib-teal); }
.form-range::-moz-range-thumb     { background-color: var(--ib-teal); }

/* Cards — softer */
.card {
  border-color: var(--bs-border-color-translucent);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow-sm);
}
.card-header {
  background-color: var(--ib-paper);
  border-bottom-color: var(--bs-border-color-translucent);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Navbar / brand */
.navbar { --bs-navbar-padding-y: .85rem; }
.navbar-brand { font-weight: 800; letter-spacing: -0.01em; }
.navbar-dark, .navbar[data-bs-theme="dark"] {
  background-color: var(--ib-teal);
}
.navbar-dark .navbar-brand,
.navbar[data-bs-theme="dark"] .navbar-brand { color: #ffffff; }

/* Alerts — softer fills using subtle bg tokens, no harsh borders */
.alert {
  border: 1px solid transparent;
  border-radius: var(--bs-border-radius);
}
.alert-primary { background-color: var(--ib-teal-050); color: var(--ib-teal-800); border-color: var(--ib-teal-100); }
.alert-info    { background-color: var(--ib-aqua-050); color: var(--ib-aqua-800); border-color: var(--ib-aqua-100); }

/* Badges — pill default, slightly lighter weight */
.badge { font-weight: 600; letter-spacing: 0.02em; }

/* Tables — header in teal */
.table > :not(caption) > * > * { padding: .8rem 1rem; }
.table > thead {
  background-color: var(--ib-paper);
  color: var(--ib-teal-800);
}
.table > thead th {
  font-weight: 700;
  border-bottom-color: var(--bs-border-color);
  text-transform: none;
  letter-spacing: 0;
}

/* List groups */
.list-group-item { border-color: var(--bs-border-color-translucent); }
.list-group-item.active {
  background-color: var(--ib-teal);
  border-color: var(--ib-teal);
}

/* Pagination */
.pagination .page-link { color: var(--ib-aqua-700); border-color: var(--bs-border-color); }
.pagination .page-item.active .page-link {
  background-color: var(--ib-teal);
  border-color: var(--ib-teal);
}

/* Progress */
.progress { background-color: var(--ib-teal-050); border-radius: var(--bs-border-radius-pill); }
.progress-bar { background-color: var(--ib-aqua); }

/* Tooltips / popovers tinted to teal */
.tooltip-inner { background-color: var(--ib-teal); }
.bs-tooltip-top  .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"]    .tooltip-arrow::before { border-top-color:    var(--ib-teal); }
.bs-tooltip-end  .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"]  .tooltip-arrow::before { border-right-color:  var(--ib-teal); }
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--ib-teal); }
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"]   .tooltip-arrow::before { border-left-color:   var(--ib-teal); }

/* Selection */
::selection { background: var(--ib-aqua-200); color: var(--ib-teal-800); }

/* Generic focus visible — accessible aqua ring */
:focus-visible {
  outline: 2px solid var(--ib-aqua);
  outline-offset: 2px;
}