/* ============================
   Numismatic Luxe — Bootstrap overrides
   Paste after Bootstrap CSS
   ============================ */
:root{
  /* Your brand tokens */
  --black:#2E2E2E;
  --purple:#5A4F8A;
  --dark-purple:#402c59;
  --blue:#4A6BAD;
  --navy:#232E43;
  --green:#8AB839;
  --silver:#B9C2D3;
  --slate:#524B59;
  --orange:#E87127;
  --offwhite:#FAFAFF;
  --white:#FEFEFE;
  --ivory:#FAF9F6;
  --red:#BE1623;
  --secondary:#434F5B;
  --teal:#3E6372;
  --byzantine:#4B2E4C;
  --garnet:#6A1F2B;
  --dark:#403C46;

  /* Bootstrap semantic remap */
  --bs-body-bg: var(--ivory);
  --bs-body-color: var(--dark);

  /* Brand “primary”: rich purple for luxe voice */
  --bs-primary: var(--dark-purple);
  --bs-primary-rgb: 90,79,138;

  --bs-secondary: var(--secondary);
  --bs-success: var(--green);
  --bs-info: var(--blue);
  --bs-warning: var(--orange);
  --bs-danger: var(--red);
  --bs-light: var(--offwhite);
  --bs-dark: var(--navy);

  --bs-link-color: var(--blue);
  --bs-link-hover-color: var(--teal);

  /* Borders, focus */
  --bs-border-color: rgba(35,46,67,.25);
  --bs-focus-ring-color: rgba(74,107,173,.35); /* info-blue focus */
}
/* --------- Type & layout --------- */
body{ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background-color: #F8F8F8!important; }
h1,h2,h3,h4,.display-title{ font-family: "Noto Serif", ui-serif, Georgia, serif; letter-spacing:.01em; }

/* --------- Buttons (tone-aware) --------- */
.btn-primary{
  background-color: var(--dark-purple);
  border-color: var(--purple);
}
.btn-primary:hover{ filter: brightness(1.05); }
.btn-primary:active{ filter: brightness(.96); }

.btn-secondary{
  color:#fff; background-color: var(--silver); border-color: var(--secondary);
}
.btn-success{ background-color: var(--green); border-color: color-mix(in oklab, var(--green), black 12%); }
.btn-info{ background-color: var(--blue); border-color: color-mix(in oklab, var(--blue), black 12%); }
.btn-warning{ background-color: var(--orange); border-color: color-mix(in oklab, var(--orange), black 12%); color:#23180e; }
.btn-danger{ background-color: var(--red); border-color: color-mix(in oklab, var(--red), black 12%); }

.btn-outline-secondary{ color: var(--secondary); border-color: var(--silver); }
.btn-outline-secondary:hover{ color:#fff; background: var(--secondary); }

/* --------- Links --------- */
a{ color: var(--blue); text-decoration: none; }
a:hover{ color: var(--teal); text-decoration: underline; }

/* --------- Cards / “museum” look --------- */
.card.museum{
  background: var(--offwhite);
  border: 1px solid rgba(35,46,67,.18);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
  border-radius: 12px;
}

/* Thin metallic rule (silver) */
.hr-silver{
  height:1px; border:0;
  background: linear-gradient(90deg, transparent, var(--silver), transparent);
}

/* --------- Badges for rarity/status --------- */
.badge-byzantine{ background: var(--byzantine); color:#F3ECF4; }
.badge-garnet{ background: var(--garnet); color:#FBEFF1; }
.badge-silver{ background: var(--silver); color:#fff; }
.badge-teal{ background: var(--teal); color:#E8F5F6; }

/* --------- Alerts tuned to palette --------- */
.alert-primary{ background: color-mix(in oklab, var(--purple), white 85%); color: var(--dark-purple); border-color: color-mix(in oklab, var(--purple), white 70%); }
.alert-secondary{ background: color-mix(in oklab, var(--silver), white 88%); color: var(--secondary); border-color: color-mix(in oklab, var(--silver), white 70%); }
.alert-success{ background: color-mix(in oklab, var(--green), white 85%); color:#2f4f05; border-color: color-mix(in oklab, var(--green), white 70%); }
.alert-info{ background: color-mix(in oklab, var(--blue), white 87%); color:#1f355c; border-color: color-mix(in oklab, var(--blue), white 70%); }
.alert-warning{ background: color-mix(in oklab, var(--orange), white 86%); color:#5b2e09; border-color: color-mix(in oklab, var(--orange), white 70%); }
.alert-danger{ background: color-mix(in oklab, var(--red), white 86%); color:#5f0e13; border-color: color-mix(in oklab, var(--red), white 70%); }

/* --------- Nav / header --------- */
.navbar-dark{
  --bs-navbar-color: #dfe5ef;
  --bs-navbar-hover-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  background: linear-gradient(180deg, var(--navy), color-mix(in oklab, var(--navy), black 10%));
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* --------- Tables --------- */
.table thead th{ border-bottom:2px solid color-mix(in oklab, var(--silver), white 40%); }
.table tbody tr{ border-color: color-mix(in oklab, var(--silver), white 60%); }

/* --------- Forms --------- */
.form-control:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(74,107,173,.25);
}


/* --------- Dark mode (toggle on .theme-dark) --------- */
.theme-dark{
  --bs-body-bg: var(--dark);
  --bs-body-color:var(--white);
  --bs-border-color: rgba(255,255,255,.12);

  --bs-link-color:#AFC4F0;
  --bs-link-hover-color:#BFE1E9;

  /* Keep semantics but deepen tones for contrast */
  --bs-primary: var(--purple);
  --bs-secondary: var(--secondary);
  --bs-success: var(--green);
  --bs-info: var(--blue);
  --bs-warning: var(--orange);
  --bs-danger: var(--red);

  /* Components on dark */
  .card.museum{
    background: color-mix(in oklab, var(--navy), white 6%);
    border-color: rgba(255,255,255,.08);
    box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.5);
  }
  .hr-silver{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); }
  .btn-secondary{ background: var(--secondary); border-color: color-mix(in oklab, var(--secondary), black 10%); }
}

/* --------- Small utilities --------- */
.text-silver{ color: var(--silver) !important; }
.text-byzantine{ color: var(--byzantine) !important; }
.text-garnet{ color: var(--garnet) !important; }
.bg-ivory{ background: var(--ivory) !important; }
.bg-offwhite{ background: var(--offwhite) !important; }
.border-silver{ border-color: var(--silver) !important; }

/* Optional: “vitrine” image frame */
.coin-frame{
  background: var(--offwhite);
  border: 1px solid color-mix(in oklab, var(--silver), white 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 28px rgba(0,0,0,.18);
  border-radius: 14px;
  padding: .75rem;
}