/* puckyard.css - PuckYard's palette layer: only the accent tokens from base.css (navy). The layer comes from the filename (#47):
   the import must report "layer puckyard". Contrast: accent-fg on accent 11.6:1, accent on bg 11.6:1, all >= 4.5:1. */

:root {
  /* Per-shop accent - deep jersey navy over an ice-blue tint */
  --color-accent:        #1a3a5c;  /* jersey navy - buttons, links, focus ring */
  --color-accent-hover:  #14304f;  /* darker navy - hover, text on soft chips */
  --color-accent-fg:     #ffffff;  /* text on navy */
  --color-accent-soft:   #e8f1f8;  /* ice-blue tint - chips, badges, focus glow */

  /* Semantic tokens (success/warning/danger/info) are inherited from
   * base.css unchanged - none of them clash with the navy family. */
}

/* ---- Size guide (/sizes, #271): PuckYard-only content page, so its styles live on this layer (#424) ---- */
/* Wider than a phone: the wrap scrolls, the page never does; row labels stay <th>. Like admin .data-table, restyled for readers. */
.sizes-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  margin-block: var(--space-4);
}

.sizes-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

.sizes-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-3) var(--space-3) var(--space-2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.sizes-table th,
.sizes-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}

/* A table of sentences (the brand guide): nowrap made every row a 1351px sideways scroll (#473). */
.sizes-table--prose td {
  white-space: normal;
  min-width: 12rem;
}

.sizes-table thead th {
  background-color: var(--color-surface);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.sizes-table tbody th {
  font-weight: var(--font-weight-medium);
}

.sizes-table tbody tr:last-child th,
.sizes-table tbody tr:last-child td { border-bottom: none; }

/* A group row (Youth / Junior / Senior) inside one table. */
.sizes-table__group th {
  background-color: var(--color-surface-2);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* The "approximate" line under a table. */
.sizes-note {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-block-start: var(--space-2);
}