/*
 * tokens.css — Semantic design tokens for RosterGeek.
 *
 * Mirrors the "RosterGeek Tokens" Variable collection in Figma.
 * Loads alphabetically after colors.css (css-zero), so neutral references
 * resolve to css-zero's oklch grays.
 *
 * Layers:
 *   1. Brand        — Rostergeek-specific colors
 *   2. Stoplight    — green/yellow/red severity (used for scores, status, etc.)
 *   3. Status       — badge palette (info / success / warning / danger / accent)
 *   4. Semantic     — text / surface / border (intent layer)
 *
 * Components consume the SEMANTIC layer. Bedrock primitives (neutrals, brand,
 * stoplight, status) are also exposed for cases where intent doesn't apply.
 */

:root {
  /* ─── Brand ─────────────────────────────────────────────────── */
  --brand-primary:       #e93325;
  --brand-primary-dark:  #c72114;
  --brand-primary-light: #eb493c;

  /* ─── Stoplight ─────────────────────────────────────────────── */
  --stoplight-green:  #219613;
  --stoplight-yellow: #ffd700;
  --stoplight-red:    var(--brand-primary);

  /* ─── Status palette (badge bg/fg pairs) ────────────────────── */
  --status-info-bg:     #e8f4fd;
  --status-info-fg:     #1a73e8;
  --status-success-bg:  #e8f5e9;
  --status-success-fg:  #2e7d32;
  --status-warning-bg:  #fff3e0;
  --status-warning-fg:  #e65100;
  --status-danger-bg:   #fef2f2;
  --status-danger-fg:   #c62828;
  --status-accent-bg:   #f3e5f5;
  --status-accent-fg:   #7b1fa2;

  /* ─── Semantic: text ────────────────────────────────────────── */
  --text-strong:  var(--gray-900);  /* highest-contrast: headings, emphasis */
  --text-default: var(--gray-700);  /* body copy */
  --text-muted:   var(--gray-500);  /* meta / secondary */
  --text-subtle:  var(--gray-400);  /* tertiary / hint */
  --text-inverse: white;            /* on dark or saturated bg */

  /* ─── Semantic: surface ─────────────────────────────────────── */
  --surface-page:    white;
  --surface-raised:  white;
  --surface-sunken:  var(--gray-50);
  --surface-frosted: white;         /* combine with 0.5 opacity + 20px backdrop-blur */

  /* ─── Semantic: border ──────────────────────────────────────── */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);

  /* ─── Type ──────────────────────────────────────────────────── */
  --font-family-display: "ATC Overlook", "Avenir", system-ui, sans-serif;
}

/*
 * Type utility classes — mirror the Figma "text/*" text styles.
 * Apply directly to elements: <h1 class="text-h1">…</h1>
 * One class sets family + size + line-height + weight + style.
 */

.text-display {
  font-family: var(--font-family-display);
  font-weight: 900; font-style: italic; font-size: 48px; line-height: 1;
}
.text-h1 {
  font-family: var(--font-family-display);
  font-weight: 900; font-style: italic; font-size: 24px; line-height: 1;
}
.text-h1-display {
  font-family: var(--font-family-display);
  font-weight: 900; font-size: 30px; line-height: 1;
}
.text-h2 {
  font-family: var(--font-family-display);
  font-weight: 900; font-size: 24px; line-height: 1;
}
.text-h3 {
  font-family: var(--font-family-display);
  font-weight: 900; font-size: 18px; line-height: 1.2;
}
.text-body-lg {
  font-family: var(--font-family-display);
  font-weight: 400; font-size: 18px; line-height: 1.4;
}
.text-body {
  font-family: var(--font-family-display);
  font-weight: 400; font-size: 16px; line-height: 24px;
}
.text-body-sm {
  font-family: var(--font-family-display);
  font-weight: 400; font-size: 13px; line-height: 18px;
}
.text-label {
  font-family: var(--font-family-display);
  font-weight: 500; font-size: 13px; line-height: 22px;
  text-transform: uppercase;
}
.text-value {
  /* Same visual as .text-h3 — apply to non-heading data values
   * (settings answers, stat readouts) so the heading styles stay tied
   * to actual h1/h2/h3 elements and the DOM outline stays clean. */
  font-family: var(--font-family-display);
  font-weight: 900; font-size: 18px; line-height: 1.2;
}
.text-caption {
  font-family: var(--font-family-display);
  font-weight: 500; font-size: 11px; line-height: 1.3;
}
.text-micro {
  font-family: var(--font-family-display);
  font-weight: 400; font-size: 10px; line-height: 1.3;
}
.text-overline {
  font-family: var(--font-family-display);
  font-weight: 900; font-size: 10px; line-height: 1.2;
  text-transform: uppercase; letter-spacing: 0.05em;
}

/*
 * Foreground (text) color utilities — pair with any .text-* size class.
 * Mirror the semantic --text-* tokens above.
 *
 *   <p class="text-body fg-muted">…</p>
 */
.fg-strong  { color: var(--text-strong);  }
.fg-default { color: var(--text-default); }
.fg-muted   { color: var(--text-muted);   }
.fg-subtle  { color: var(--text-subtle);  }
.fg-inverse { color: var(--text-inverse); }