/* Good Team Fun design tokens. Custom properties only; no element selectors here.
   Each oklch() value is preceded by a hex fallback for older browsers. */

:root {
  /* Neutrals */
  --gtf-ink: #1C1814;
  --gtf-cream: #F6EFE2;
  --gtf-text-2: #B8AC9C;
  --gtf-text-3: #8E8375;
  --gtf-text-4: #A99D8C;
  --gtf-line: #6A5F52;
  --gtf-surface-1: #241F1A;
  --gtf-surface-2: #2A241E;
  --gtf-surface-3: #302A23;
  --gtf-surface-4: #3A332B;
  --gtf-reel: #2B241D;
  --gtf-ink-hover: #33291D;

  /* Brand */
  --gtf-yellow: #F2C94C;
  --gtf-yellow: oklch(0.82 0.15 95);
  --gtf-yellow-hi: #F7D877;
  --gtf-yellow-hi: oklch(0.88 0.13 95);
  --gtf-orange: #EE6B2F;
  --gtf-orange: oklch(0.72 0.19 40);
  --gtf-orange-hi: #FA8A55;
  --gtf-orange-hi: oklch(0.8 0.17 40);
  --gtf-pink: #EE7DB0;
  --gtf-pink: oklch(0.76 0.16 340);
  --gtf-teal: #5FC7CF;
  --gtf-teal: oklch(0.8 0.12 200);
  --gtf-success: #5DCB7A;
  --gtf-success: oklch(0.78 0.16 150);
  --gtf-danger: var(--gtf-orange);

  /* Shape */
  --gtf-radius-chip: 4px;
  --gtf-radius-btn: 10px;
  --gtf-radius-input: 12px;
  --gtf-radius-tile: 13px;
  --gtf-radius-card: 14px;
  --gtf-sticker: 8px 8px 0 var(--gtf-pink);

  /* Type */
  --gtf-font: "Outfit", Helvetica, Arial, sans-serif;
  --gtf-mono: "DM Mono", ui-monospace, monospace;

  /* Layout */
  --gtf-container: 1180px;
  --gtf-gutter: 24px;
  --gtf-section-gap: 96px;
}

/* Per-game hue: class="gtf-hued" style="--hue: 40" (see GameCatalogueHelper#game_hue_attrs). */
.gtf-hued {
  --game: oklch(0.78 0.16 var(--hue, 95));
  --game-dark: oklch(0.3 0.09 var(--hue, 95));
}