/**
 * @file
 * ICJ Support design tokens.
 *
 * Every value is an existing icj theme color (see docs/phase-1-plan.md,
 * "Design-System Map"); components use only these variables.
 */
:root {
  --icjs-primary: #5a72a2; /* $primary, ICJ Blue */
  --icjs-primary-dark: #044c87; /* $primary-alt, ICJ Dark Blue */
  --icjs-primary-soft: #dee3ec; /* .alert-primary background */
  --icjs-primary-soft-border: #d1d8e5; /* .alert-primary border */
  --icjs-primary-soft-text: #2f3b54; /* .alert-primary text */
  --icjs-accent: #841617; /* $secondary, ICJ Maroon */
  --icjs-text: #212529; /* $body-color */
  --icjs-text-secondary: #343a40; /* $gray-800 */
  --icjs-muted: #6c757d; /* $gray-600 */
  --icjs-border: #dee2e6; /* $border-color */
  --icjs-border-strong: #ced4da; /* $input-border-color */
  --icjs-surface: #fff; /* $white */
  --icjs-surface-alt: #f8f9fa; /* $gray-100 */
  --icjs-surface-muted: #efefef; /* $light */
  --icjs-success-strong: #1e7e34; /* .btn-success active */
  --icjs-success-soft: #d4edda; /* .alert-success background */
  --icjs-success-text: #155724; /* .alert-success text */
  --icjs-warning-soft: #fff3cd; /* .alert-warning background */
  --icjs-warning-border: #ffeeba; /* .alert-warning border */
  --icjs-warning-text: #856404; /* .alert-warning text */
  --icjs-danger-soft: #e6d0d1; /* .alert-danger background */
  --icjs-info-soft: #d4e8eb; /* $info */
  --icjs-info-text: #343a40; /* $gray-800 */
  --icjs-purple: #6f42c1; /* $purple */
  --icjs-light-bg: #efefef; /* $light */
  --icjs-light-text: #495057; /* $gray-700 */
  --icjs-radius: .25rem; /* $border-radius */
  --icjs-radius-lg: .3rem; /* $border-radius-lg */
}

.icjs-card {
  border: 1px solid var(--icjs-border);
  border-radius: var(--icjs-radius-lg);
  background: var(--icjs-surface);
}

.icjs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.icjs-layout__main,
.icjs-layout__aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

@media (min-width: 992px) {
  .icjs-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: 2.5rem;
  }
  .icjs-layout--wide-aside {
    grid-template-columns: minmax(0, 1fr) 21.25rem;
  }
}

.icjs-lead {
  max-width: 47.5rem;
  margin: 0 0 1.5rem;
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--icjs-text-secondary);
}

/* Ticket tables (staff queue and My Tickets). Striped and sorted rows
   darken the background, so links use the darker theme blue. */
.icjs-queue-table a {
  color: var(--icjs-primary-dark);
}