/* CardedGolf — brand tokens
   Drop into wwwroot/css/ and import before your app styles. */

:root {
  /* Core palette */
  --cg-ink:      #16232E;  /* primary. text, marks, dark surfaces */
  --cg-red:      #CE3B2B;  /* accent. totals, the second rule, alerts */
  --cg-graphite: #78838C;  /* secondary text, dividers, "Golf" in the wordmark */
  --cg-card:     #EFEAE0;  /* page background, reversed marks */
  --cg-panel:    #F7F4EC;  /* raised surfaces on --cg-card */

  /* Semantic aliases — prefer these in components */
  --cg-bg:            var(--cg-card);
  --cg-surface:       var(--cg-panel);
  --cg-text:          var(--cg-ink);
  --cg-text-muted:    var(--cg-graphite);
  --cg-accent:        var(--cg-red);
  --cg-rule:          color-mix(in srgb, var(--cg-graphite) 35%, transparent);

  /* Scoring notation — matches the logo's glyph language */
  --cg-score-under:   var(--cg-ink);   /* circle: birdie or better */
  --cg-score-over:    var(--cg-ink);   /* square: bogey or worse */
  --cg-score-total:   var(--cg-red);
}

@media (prefers-color-scheme: dark) {
  :root {
    --cg-bg:         #101A22;
    --cg-surface:    #16232E;
    --cg-text:       #EFEAE0;
    --cg-text-muted: #78838C;
    --cg-rule:       color-mix(in srgb, #78838C 30%, transparent);

    /* Notation glyphs are drawn in the text colour, so they must flip too. */
    --cg-score-under: #EFEAE0;
    --cg-score-over:  #EFEAE0;
  }
}

/* Monochrome logo files inherit this. <svg> or <img> won't —
   inline the SVG, or use an <object>, for currentColor to apply. */
.cg-logo-mono { color: var(--cg-text); }

/* Scorecards live or die on column alignment. Always use tabular figures
   for any grid of numbers. */
.cg-scorecard,
.cg-score,
.cg-total {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}