/* The shelf-life color system. Every pair (background + text) is chosen for
   WCAG AA contrast, and every surface also carries glyph + text so meaning
   never rides on color alone. A contrast test (tests/contrast.test.mjs)
   verifies these pairs stay >= 4.5:1. */

:root {
  --st-fresh-bg: #e3f2e5;  --st-fresh-text: #155e2e; --st-fresh-line: #2f6b3f;
  --st-near-bg:  #fdf3d7;  --st-near-text:  #6d5600; --st-near-line:  #b8860b;
  --st-soon-bg:  #ffe9d1;  --st-soon-text:  #8a3c00; --st-soon-line:  #c05c00;
  --st-today-bg: #ffe2e2;  --st-today-text: #b30000; --st-today-line: #d64545;
  --st-exp-bg:   #b3261e;  --st-exp-text:   #ffffff; --st-exp-line:   #b3261e;
  --st-none-bg:  #eceff1;  --st-none-text:  #455a64; --st-none-line:  #90a4ae;
}

/* ---------- badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  white-space: nowrap;
}
.badge__glyph { font-size: 11px; line-height: 1; }

.badge--fresh   { background: var(--st-fresh-bg);  color: var(--st-fresh-text); }
.badge--nearing { background: var(--st-near-bg);   color: var(--st-near-text); }
.badge--soon    { background: var(--st-soon-bg);   color: var(--st-soon-text); }
.badge--today   { background: var(--st-today-bg);  color: var(--st-today-text); }
.badge--expired { background: var(--st-exp-bg);    color: var(--st-exp-text); }
.badge--none    { background: var(--st-none-bg);   color: var(--st-none-text); }

/* ---------- card tints (very light wash + strong status edge) ---------- */

.item-card { border-left: 5px solid var(--st-none-line); }
.item-card--fresh   { border-left-color: var(--st-fresh-line);  background: linear-gradient(0deg, #fbfdfc, #ffffff); }
.item-card--nearing { border-left-color: var(--st-near-line);   background: linear-gradient(0deg, #fffdf6, #ffffff); }
.item-card--soon    { border-left-color: var(--st-soon-line);   background: linear-gradient(0deg, #fffaf3, #ffffff); }
.item-card--today   { border-left-color: var(--st-today-line);  background: linear-gradient(0deg, #fff6f6, #ffffff); }
.item-card--expired { border-left-color: var(--st-exp-line);    background: linear-gradient(0deg, #fdf1f0, #fffafa); }

/* ---------- dashboard stat accents ---------- */

.stat--fresh   { border-top: 4px solid var(--st-fresh-line); }
.stat--warning { border-top: 4px solid var(--st-soon-line); }
.stat--danger  { border-top: 4px solid var(--st-today-line); }
.stat--neutral { border-top: 4px solid #a9a294; }
.stat--value   { border-top: 4px solid var(--accent); }
.stat--danger .stat__value { color: var(--st-today-text); }
.stat--warning .stat__value { color: var(--st-soon-text); }
.stat--fresh .stat__value { color: var(--st-fresh-text); }

.stat--pulse { animation: stat-pulse 2.4s ease-in-out infinite; }
@keyframes stat-pulse {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .stat--pulse { animation: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- alert rows ---------- */

.alert-row--expired { background: #fdf1f0; }
.alert-row--today   { background: #fff6f6; }
.alert-row--soon    { background: #fffaf3; }
.alert-row--nearing { background: #fffdf6; }

.alert-group__title { color: var(--ink); }
.alert-group--expired .alert-group__title { color: var(--st-today-text); }
.alert-group--today .alert-group__title { color: var(--st-today-text); }

/* ---------- welcome dots ---------- */

.welcome__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: -1px; }
.welcome__dot--green { background: var(--st-fresh-line); }
.welcome__dot--amber { background: var(--st-soon-line); }
.welcome__dot--red { background: var(--st-exp-line); }