/* ============================================================
   CARD — The foundation of every transactional screen.

   USAGE:
   <div class="themed-card">
     <div class="corner-accents"></div>
     ... content ...
   </div>
   ============================================================ */

.themed-card {
  background: var(--color-surface-base);
  border: 1px solid var(--color-border);
  border-radius: 0;                          /* SHARP corners. Never rounded. */
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  position: relative;
}

/* ── Accent corner accents (top-left + bottom-right) ── */
.themed-card::before,
.themed-card::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--color-accent);
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}

.themed-card::before {
  top: 10px;
  left: 10px;
  border-top-width: 1px;
  border-left-width: 1px;
}

.themed-card::after {
  bottom: 10px;
  right: 10px;
  border-bottom-width: 1px;
  border-right-width: 1px;
}

/* ── Accent corner accents (top-right + bottom-left) ── */
.corner-accents {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.corner-accents::before {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  border-top: 1px solid var(--color-accent);
  border-right: 1px solid var(--color-accent);
}

.corner-accents::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  border-bottom: 1px solid var(--color-accent);
  border-left: 1px solid var(--color-accent);
}