/* === PALETTE (LIGHT / DARK) ========================================= */
:root[data-bs-theme="light"]{
  --brand-teal:    #0F9E99;
  --brand-ink:     #0C0908;
  --brand-olive:   #2C3227;
  --brand-muted:   #555D50;
  --brand-sand:    #EFE9E0;

  --bs-body-bg:            var(--brand-sand);
  --bs-body-color:         var(--brand-ink);              /* #0C0908 for strong contrast */
  --bs-emphasis-color:     var(--brand-ink);
  --bs-secondary-color:    #6b7268;                       /* lifted from #555D50 for legibility */
  --bs-border-color:       #d9d2c7;                       /* sand-edge for subtle borders */

  --bs-primary:            var(--brand-teal);
  --bs-link-color:         var(--brand-teal);
  --bs-link-hover-color:   color-mix(in srgb, var(--brand-teal), black 10%);

  --bs-card-bg:            #ffffff;
  --bs-card-color:         var(--brand-ink);

  /* Navbar/Footer surfaces in light */
  --nav-bg:                #ffffff;
  --footer-bg:             #F6F2EB;                       /* slightly brighter than page bg */

  /* Components */
  --btn-outline-hover-bg:  color-mix(in srgb, var(--brand-teal), white 85%);
}

:root[data-bs-theme="dark"]{
  --brand-teal:    #12B3AC;       /* brighter than #0F9E99 for AA contrast on dark */
  --brand-ink:     #EFE9E0;       /* readable text on dark */
  --brand-olive:   #2C3227;
  --brand-muted:   #A9B2A8;       /* lifted from #555D50 */
  --brand-sand:    #0C0908;

  --bs-body-bg:            var(--brand-sand);   /* #0C0908 */
  --bs-body-color:         var(--brand-ink);    /* #EFE9E0 */
  --bs-emphasis-color:     var(--brand-ink);
  --bs-secondary-color:    var(--brand-muted);
  --bs-border-color:       #3a4235;             /* border against #2C3227 */

  --bs-primary:            var(--brand-teal);
  --bs-link-color:         color-mix(in srgb, var(--brand-teal), white 10%);
  --bs-link-hover-color:   var(--brand-teal);

  --bs-card-bg:            var(--brand-olive);  /* #2C3227 */
  --bs-card-color:         var(--brand-ink);

  /* Navbar/Footer surfaces in dark */
  --nav-bg:                #0C0908;
  --footer-bg:             #101311;             /* near black with olive tint */

  --btn-outline-hover-bg:  color-mix(in srgb, var(--brand-teal), black 80%);
}

/* === GLOBAL ========================================================= */
body{
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  padding-top: 4.5rem; /* space for fixed navbar */
}

/* Navbar + Offcanvas */
.bg-nav{ background-color: var(--nav-bg) !important; }
.navbar .nav-link{ font-weight: 600; }
.navbar .navbar-brand{ font-weight: 800; letter-spacing:.02em; }

.navbar-toggler{
  border-color: var(--bs-border-color);
}
.navbar-toggler:focus{
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--bs-primary), transparent 70%);
}

.offcanvas.bg-nav{ color: var(--bs-body-color); }

/* Buttons tuned to palette */
.btn-outline-primary{
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-border-color: var(--bs-link-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-link-color);
  --bs-btn-hover-border-color: var(--bs-link-color);
}

/* Cards / Sections */
.bg-footer{ background-color: var(--footer-bg); }
.bg-section{
  background:
    radial-gradient(900px 300px at 0% 0%, color-mix(in srgb, var(--bs-primary), transparent 88%), transparent 60%);
}

/* Step pills (used in 'How it works') */
.step-card{ position: relative; }
.step-number{
  position:absolute; top:.75rem; right:.75rem;
  width:2rem; height:2rem; border-radius:50%;
  display:grid; place-items:center; font-weight:700;
  background: var(--bs-primary); color:#fff;
}

/* Contrast helpers */
a.link-body-emphasis{ color: var(--bs-body-color); text-decoration: none; }
a.link-body-emphasis:hover{ text-decoration: underline; }

/* Accessibility: focus ring color */
:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--bs-primary), white 20%);
  outline-offset: 2px;
}

/* Bigger, responsive logo in the centered brand */
.navbar-brand-img {
  height: clamp(48px, 6.5vh, 72px);
  width: auto;
}

/* Make icon buttons comfy and consistent */
.navbar .btn.btn-sm {
  padding: .35rem .55rem;
  line-height: 1;
}

/* --- Order Flow Timeline --- */
.timeline {
  position: relative;
  padding-left: 1rem;
}
.timeline .t-line {
  position: absolute;
  left: 1.25rem;
  top: .25rem;
  width: 2px;
  height: calc(100% - .5rem);
  background: var(--bs-border-color);
  transform: scaleY(0);
  transform-origin: top;
  will-change: transform;
}
.t-item {
  position: relative;
  padding-left: 3.25rem;
  margin-bottom: 1.25rem;
}
.t-bullet {
  position: absolute;
  left: 0;
  top: .125rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 700;
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  border: 2px solid var(--bs-primary);
}
.t-card {
  background: var(--bs-card-bg);
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem;
  padding: 1rem 1rem;
}
.t-sublist .t-badge {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 1.6rem;
  border-radius: .5rem;
  font-weight: 700;
  font-size: .8rem;
  color: #fff;
  background: var(--bs-primary);
}
.t-callout {
  padding: .75rem .85rem;
  border-radius: .5rem;
  background: color-mix(in srgb, var(--bs-primary), transparent 88%);
  border: 1px dashed color-mix(in srgb, var(--bs-primary), transparent 65%);
}

/* Dark mode dropdown contrast (keeps consistency) */
:root[data-bs-theme="dark"] .t-card {
  border-color: #3a4235;
}