/* HitGoals — Color tokens
   Anchored to the red arrow mascot, warm cream paper, and the pastel
   yellow / green / teal accents from the mascot's building blocks. */
:root {
  /* ---- Brand red (primary) ---- */
  --red-50:  #FDF1EF;
  --red-100: #FCDED9;
  --red-200: #F9BDB4;
  --red-300: #F79287;
  --red-400: #F5675A;
  --red-500: #F23B2E; /* HitGoals red — primary brand color */
  --red-600: #D82C20; /* hover */
  --red-700: #B32117; /* pressed / 3D under-edge */
  --red-800: #8A1810;

  /* ---- Warm cream / paper (surfaces & backgrounds) ---- */
  --cream-50:  #FFFDF8;
  --cream-100: #FBF5EB; /* app canvas */
  --cream-200: #F5EBD9; /* sunken surface */
  --cream-300: #ECDFC6; /* hairline on cream */
  --paper:     #FFFFFF; /* card surface (mascot belly white) */

  /* ---- Ink (outlines & text — warm near-black brown) ---- */
  --ink-900: #2A1712; /* mascot outline, primary text */
  --ink-700: #4A362F;
  --ink-500: #6E574E; /* secondary text */
  --ink-400: #937C73; /* muted text */
  --ink-300: #BCA99F; /* disabled */

  /* ---- Pastel accents (from the mascot's cubes) ---- */
  --gold-100: #FDF1D4;
  --gold-300: #F9DC8C;
  --gold-400: #F7CE5E; /* soft gold cube */
  --gold-500: #F0B93D; /* warning / streaks */
  --gold-600: #D69A22;

  --green-100: #E3F3D6;
  --green-300: #B6E293;
  --green-400: #8FD16A; /* leaf green cube */
  --green-500: #5DB63C; /* success / done */
  --green-600: #479128;

  --teal-100: #D8F1EC;
  --teal-300: #98DDD0;
  --teal-400: #67CDBB; /* soft teal accent */
  --teal-500: #29B39A; /* focus / insights */
  --teal-600: #1B8F7B;

  --sky-100: #DCEEFB;
  --sky-300: #A9D3F3;
  --sky-400: #7FBDEC; /* sweat-drop blue */
  --sky-500: #4A9EE6; /* info */
  --sky-600: #2C7CC4;

  --cheek: #F6C7BE; /* mascot cheek blush */

  /* ================= Semantic aliases ================= */
  --color-bg:            var(--cream-100);
  --color-surface:       var(--paper);
  --color-surface-sunken:var(--cream-200);
  --color-surface-tint:  var(--red-50);

  --brand:               var(--red-500);
  --brand-hover:         var(--red-600);
  --brand-pressed:       var(--red-700);
  --brand-tint:          var(--red-100);
  --brand-edge:          var(--red-700); /* 3D bottom edge on red buttons */

  --text-primary:        var(--ink-900);
  --text-secondary:      var(--ink-500);
  --text-muted:          var(--ink-400);
  --text-disabled:       var(--ink-300);
  --text-on-brand:       #FFFFFF;
  --text-on-accent:      var(--ink-900);

  --border-subtle:       var(--cream-300);
  --border-default:      #E7DBC7;
  --border-strong:       var(--ink-900);

  --success:             var(--green-500);
  --success-tint:        var(--green-100);
  --success-edge:        var(--green-600);
  --warning:             var(--gold-500);
  --warning-tint:        var(--gold-100);
  --danger:              var(--red-500);
  --danger-tint:         var(--red-100);
  --info:                var(--sky-500);
  --info-tint:           var(--sky-100);
  --focus:               var(--teal-500);
  --focus-tint:          var(--teal-100);

  --focus-ring:          var(--red-300);
}