/* ============================================
   Design Tokens - OSDE Style
   ============================================ */

:root {
  --osde-blue: #1226AA;
  --paper: #FAFAF9;
  --ink: #1B2033;
  --muted: #7C818F;
  --line: #ECEDF2;
  --brick: #B0503F;
  --okgreen: #1E8A5F;
}

.font-display {
  font-family: 'Manrope', system-ui, sans-serif;
}

.text-ink { color: var(--ink); }
.text-muted { color: var(--muted); }
.text-okgreen { color: var(--okgreen); }
.bg-line { background-color: var(--line); }

/* ============================================
   Page Background - Paper
   ============================================ */

.bg-paper { background-color: #FAFAF9; }
.text-osde { color: #1226AA; }
.border-osde { border-color: #1226AA; }

/* ============================================
   Credential Cards - Swipeable
   ============================================ */

/* Scroll container */
#cardScroller {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Card slide snap */
.card-slide {
  scroll-snap-align: center;
}

/* Security pattern overlay */
.security-pattern {
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 7px);
}

/* Embossed text effect */
.embossed {
  color: #1B2033;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7), 0 -1px 0 rgba(27,32,51,0.08);
}

/* Dots indicator */
.dot {
  transition: all 0.25s ease;
  cursor: pointer;
}

.dot.active {
  width: 16px;
}

/* Hide scrollbar */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ============================================
   Status Banner
   ============================================ */

.status-banner {
  width: 100%;
  padding: 14px 18px;
  border-radius: 14px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.status-banner svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Active banner - with gradient and glow */
.status-banner--active {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #065f46;
  border: 1px solid #a7f3d0;
  box-shadow: 0 2px 12px rgba(16, 185, 129, 0.15);
}

.status-banner--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #10b981, #34d399);
  border-radius: 0 2px 2px 0;
}

.status-banner--active svg {
  color: #10b981;
}

/* Warning banner */
.status-banner--warning {
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  color: #92400e;
  border: 1px solid #fde68a;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.15);
}

.status-banner--warning::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #f59e0b, #fbbf24);
  border-radius: 0 2px 2px 0;
}

.status-banner--warning svg {
  color: #f59e0b;
}

/* Blocked banner */
.status-banner--blocked {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  color: #991b1b;
  border: 1px solid #fecaca;
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.15);
}

.status-banner--blocked::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom, #ef4444, #f87171);
  border-radius: 0 2px 2px 0;
}

.status-banner--blocked svg {
  color: #ef4444;
}

@media (prefers-color-scheme: dark) {
  .status-banner--active {
    background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
    color: #a7f3d0;
    border-color: #065f46;
  }

  .status-banner--warning {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    color: #fde68a;
    border-color: #92400e;
  }

  .status-banner--blocked {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #fecaca;
    border-color: #991b1b;
  }
}