/* ==========================================================================
   ITEC100 Digital Systems Showcase - design tokens and shared primitives

   BRANDING STATUS
   ---------------
   The gold is measured from the official Olivet University crest supplied for
   this project (`static/img/logo-crest.png`): #D8A830 is its dominant colour.
   `--brand-gold` is that value, used for ornament on dark grounds;
   `--brand-accent` is the same hue darkened enough to pass WCAG AA as text on
   white, because the crest gold at full lightness does not.

   The dark tone remains a neutral academic navy, NOT an official colour: the
   supplied assets contain no dark brand colour to measure (the wordmark is
   white, drawn for dark grounds). It is the one value still awaiting Dr. Ha's
   confirmation, and changing it means editing these two tokens and nothing
   else.
   ========================================================================== */

:root {
  /* Brand */
  --brand-ink: #14243d;         /* neutral academic navy - awaiting official value */
  --brand-ink-strong: #0b1626;  /* the same, darkened for large flat areas */
  --brand-gold: #d8a830;        /* measured from the official crest */
  --brand-accent: #8a6206;      /* crest gold, darkened for text on white (AA) */
  --brand-accent-soft: #fbf3e0;

  /* Neutrals */
  --surface: #ffffff;
  --surface-muted: #f7f8fa;
  --surface-sunken: #eef1f5;
  --border: #dfe3ea;
  --border-strong: #c3cad6;

  --text: #1b2432;
  --text-muted: #5a6577;
  --text-inverse: #f5f7fa;

  /* Status */
  --ok: #1f7a4d;
  --ok-soft: #e6f4ec;
  --warn: #8a5b00;
  --warn-soft: #fdf3e0;
  --danger: #a02020;
  --danger-soft: #fbeaea;
  --info: #1d4f91;
  --info-soft: #e8f0fb;

  /* Typography */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Rhythm */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 16px rgba(16, 24, 40, 0.08);

  --measure: 68ch;
  --container: 1180px;
  --container-narrow: 860px;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  color: var(--brand-ink-strong);
  line-height: 1.2;
  margin: 0 0 var(--space-4);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.1rem);
}
h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.05rem;
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

a {
  color: var(--brand-ink);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--brand-accent);
}

:focus-visible {
  outline: 3px solid var(--brand-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  background: var(--surface-sunken);
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  border: 1px solid var(--border);
}

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2.5rem, var(--container-narrow));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-8);
}

.section--muted {
  background: var(--surface-muted);
  border-block: 1px solid var(--border);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--cards {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.grid--stats {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-ink);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Components
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: var(--measure);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.65rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.btn--primary {
  background: var(--brand-ink);
  color: var(--text-inverse);
}

.btn--primary:hover {
  background: var(--brand-ink-strong);
  color: var(--text-inverse);
}

.btn--secondary {
  background: var(--surface);
  color: var(--brand-ink);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  border-color: var(--brand-ink);
  color: var(--brand-ink);
}

.btn--quiet {
  background: transparent;
  color: var(--text-muted);
  padding-inline: var(--space-2);
}

.btn--small {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* An action, not a label: it is the one badge you can click, so it carries
   the brand gold rather than the muted grey the descriptive badges use. */
.badge--play {
  background: var(--brand-gold);
  color: var(--brand-ink-strong);
  border-color: transparent;
  text-decoration: none;
}
.badge--play:hover,
.badge--play:focus-visible {
  background: var(--brand-ink);
  color: var(--text-inverse);
}

/* The same action, but gated: quiet, so it does not compete with the badge
   that opens for anyone, while still reading as something you can click. */
.badge--play-gated {
  background: var(--brand-accent-soft);
  color: var(--brand-accent);
  border-color: var(--brand-gold);
  text-decoration: none;
}
.badge--play-gated:hover,
.badge--play-gated:focus-visible {
  background: var(--brand-ink);
  color: var(--text-inverse);
  border-color: transparent;
}

.badge--ok {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: transparent;
}
.badge--warn {
  background: var(--warn-soft);
  color: var(--warn);
  border-color: transparent;
}
.badge--danger {
  background: var(--danger-soft);
  color: var(--danger);
  border-color: transparent;
}
.badge--info {
  background: var(--info-soft);
  color: var(--info);
  border-color: transparent;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.notice {
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-accent);
  background: var(--surface-muted);
  padding: var(--space-4);
  border-radius: var(--radius);
}

.notice p:last-child {
  margin-bottom: 0;
}

.notice--ok {
  border-left-color: var(--ok);
  background: var(--ok-soft);
}
.notice--warn {
  border-left-color: var(--warn);
  background: var(--warn-soft);
}
.notice--danger {
  border-left-color: var(--danger);
  background: var(--danger-soft);
}

.messages {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--text-muted);
  background: var(--surface-muted);
}

.empty-state p {
  margin-inline: auto;
}

/* Forms */
label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: var(--space-2);
  color: var(--text);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-ink);
}

.field + .field {
  margin-top: var(--space-4);
}

.field__help {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.field__error {
  font-size: 0.85rem;
  color: var(--danger);
  margin: var(--space-1) 0 0;
}

.errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-3);
  color: var(--danger);
  font-size: 0.9rem;
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

table.data th,
table.data td {
  text-align: left;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

table.data th {
  background: var(--surface-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  white-space: nowrap;
}

table.data tr:last-child td {
  border-bottom: 0;
}

/* Definition lists used for structured metadata */
dl.meta {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

dl.meta dt {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
}

dl.meta dd {
  margin: 0;
}

@media (max-width: 640px) {
  dl.meta {
    grid-template-columns: 1fr;
    gap: var(--space-1) 0;
  }
  dl.meta dd {
    margin-bottom: var(--space-3);
  }
}