/*
 * BoxVolume brand tokens — kraft/cream palette + typography.
 * Mirrors the Flutter app's `BoxTokens` (app/lib/theme/box_tokens.dart).
 *
 * Loaded BEFORE site.css and AFTER bootstrap.min.css so it can both:
 *   1. Expose `--box-*` custom properties for new components.
 *   2. Retarget Bootstrap's `--bs-*` variables so legacy Bootstrap
 *      utilities (`btn-primary`, `card`, `bg-white`, etc.) pick up
 *      the brand without per-page edits.
 */

:root {
  /* Surfaces / ink */
  --box-bg:            #F4EFE6;
  --box-surface:       #FFFFFF;
  --box-surface-alt:   #EDE5D6;
  --box-stroke:        #E2D8C5;
  --box-stroke-strong: #C7B996;
  --box-ink:           #1F1B16;
  --box-ink-soft:      #6E6256;
  --box-ink-dim:       #9A8E7E;

  /* Brand accent (kraft) */
  --box-accent:        #A78B5F;
  --box-accent-deep:   #7A6240;
  --box-accent-tint:   #EFE6D2;

  /* Iso-box face tones */
  --box-kraft-top:     #E8D4A8;
  --box-kraft-lit:     #C9A772;
  --box-kraft-shaded:  #8E7547;
  --box-kraft-tape:    #B89764;

  /* Radii */
  --box-r-xs:  4px;
  --box-r-sm:  10px;
  --box-r-md:  12px;
  --box-r-lg:  14px;
  --box-r-xl:  18px;
  --box-r-2xl: 24px;

  /* Typography stacks */
  --box-font-ui:     "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --box-font-mono:   "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --box-font-serif:  "Instrument Serif", "Times New Roman", Georgia, serif;

  /* ────────────────────────────────────────────────────────────
   * Bootstrap variable overrides — retarget at the kraft palette
   * so cards, buttons, navbars rebrand without per-file edits.
   * ──────────────────────────────────────────────────────────── */

  --bs-body-bg:           var(--box-bg);
  --bs-body-color:        var(--box-ink);
  --bs-body-font-family:  var(--box-font-ui);
  --bs-secondary-color:   var(--box-ink-soft);
  --bs-tertiary-color:    var(--box-ink-dim);
  --bs-border-color:      var(--box-stroke);
  --bs-border-color-translucent: var(--box-stroke);

  --bs-primary:           var(--box-ink);
  --bs-primary-rgb:       31, 27, 22;
  --bs-primary-bg-subtle: var(--box-accent-tint);
  --bs-primary-text-emphasis: var(--box-accent-deep);

  --bs-link-color:        var(--box-accent-deep);
  --bs-link-color-rgb:    122, 98, 64;
  --bs-link-hover-color:  var(--box-ink);

  --bs-card-bg:           var(--box-surface);
  --bs-card-border-color: var(--box-stroke);
  --bs-card-border-radius: var(--box-r-xl);
  --bs-card-inner-border-radius: var(--box-r-xl);

  --bs-navbar-color:      var(--box-ink);
  --bs-navbar-hover-color: var(--box-accent-deep);
  --bs-navbar-active-color: var(--box-ink);
}

/* ── Base typography ──────────────────────────────────────── */

body {
  font-family: var(--box-font-ui);
  background-color: var(--box-bg);
  color: var(--box-ink);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--box-font-ui);
  color: var(--box-ink);
  letter-spacing: -0.01em;
}

/* ── Branded wordmark ─────────────────────────────────────── */

.box-wordmark {
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}

.box-wordmark > .box-wordmark__a {
  font-family: var(--box-font-ui);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--box-ink);
}

.box-wordmark > .box-wordmark__b {
  font-family: var(--box-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  color: var(--box-accent-deep);
  margin-left: 1px;
}

/* ── Eyebrows ─────────────────────────────────────────────── */

.box-eyebrow {
  font-family: var(--box-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--box-ink-dim);
  margin: 0 0 0.625rem 0;
}

.box-eyebrow-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.625rem;
}

.box-eyebrow-action {
  font-family: var(--box-font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--box-accent-deep);
  text-decoration: none;
  white-space: nowrap;
}

.box-eyebrow-action:hover {
  color: var(--box-ink);
}

/* ── Card surfaces ────────────────────────────────────────── */

.card.box-card,
.box-card {
  background: var(--box-surface);
  border: 1px solid var(--box-stroke);
  border-radius: var(--box-r-xl);
  box-shadow: none;
}

.card.box-card-hero,
.box-card-hero {
  border-radius: var(--box-r-2xl);
  padding: 1.5rem;
}

/* Bootstrap card shadow → off; we use the hairline border instead. */
.card.shadow-sm {
  box-shadow: none !important;
  border: 1px solid var(--box-stroke);
}

/* ── Buttons ──────────────────────────────────────────────── */

.btn-primary {
  --bs-btn-bg: var(--box-ink);
  --bs-btn-border-color: var(--box-ink);
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: #000;
  --bs-btn-active-bg: #000;
  --bs-btn-active-border-color: #000;
  --bs-btn-disabled-bg: var(--box-ink-soft);
  --bs-btn-disabled-border-color: var(--box-ink-soft);
}

.btn-outline-primary {
  --bs-btn-color: var(--box-ink);
  --bs-btn-border-color: var(--box-stroke);
  --bs-btn-hover-bg: var(--box-surface-alt);
  --bs-btn-hover-color: var(--box-ink);
  --bs-btn-hover-border-color: var(--box-stroke-strong);
  --bs-btn-active-bg: var(--box-ink);
  --bs-btn-active-color: var(--box-surface);
  --bs-btn-active-border-color: var(--box-ink);
}

.btn-outline-secondary {
  --bs-btn-color: var(--box-ink-soft);
  --bs-btn-border-color: var(--box-stroke);
  --bs-btn-hover-bg: var(--box-surface-alt);
  --bs-btn-hover-color: var(--box-ink);
  --bs-btn-hover-border-color: var(--box-stroke-strong);
}

/* ── Navbar ───────────────────────────────────────────────── */

.navbar.bg-white {
  background-color: var(--box-bg) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* ── Branded text helpers ─────────────────────────────────── */

.box-text-mono {
  font-family: var(--box-font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.box-text-serif-em {
  font-family: var(--box-font-serif);
  font-style: italic;
  color: var(--box-accent-deep);
}

.box-text-ink-soft  { color: var(--box-ink-soft); }
.box-text-ink-dim   { color: var(--box-ink-dim);  }
.box-text-accent    { color: var(--box-accent-deep); }

/* ── Pill chip (mono uppercase) ───────────────────────────── */

.box-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3125rem 0.5625rem;
  border-radius: 999px;
  background: var(--box-accent-tint);
  color: var(--box-accent-deep);
  font-family: var(--box-font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── Footer ───────────────────────────────────────────────── */

footer {
  color: var(--box-ink-soft);
}

footer a.text-muted {
  color: var(--box-ink-soft) !important;
  text-decoration: none;
}

footer a.text-muted:hover {
  color: var(--box-accent-deep) !important;
}

.border-top {
  border-top: 1px solid var(--box-stroke) !important;
}