/* ============================================================
   TANGRAM · COLORS
   Gamified financial education for schools — vibrant, young,
   friendly. Built on a roxo (purple) + verde-limão (lime)
   core, anchored by grafite, with a festive "Olimpíada" set.
   ============================================================ */

:root {
  /* --- Brand · Roxo (primary purple) --- */
  --tg-roxo-900: #3A0663;   /* deep — display background          */
  --tg-roxo-950: #270274;   /* deepest — deep-gradient end (profundo) */
  --tg-roxo-800: #401F5E;   /* Camille escuro                     */
  --tg-roxo-700: #4C19B2;   /* web escuro — pressed / depth       */
  --tg-roxo-600: #5B1FD4;   /* hover step                         */
  --tg-roxo-500: #7228F3;   /* PRIMARY — web médio, the Tangram roxo */
  --tg-roxo-400: #8A4DF6;   /* tints                              */
  --tg-roxo-300: #B79BFA;
  --tg-roxo-200: #D9CCFD;
  --tg-roxo-100: #EFE9FE;   /* lightest wash / surface tint        */
  --tg-roxo-camille: #835396; /* muted heritage purple (print)     */

  /* --- Brand · Verde-limão (lime accent) --- */
  --tg-verde-700: #7E9416;
  --tg-verde-600: #9BB31C;
  --tg-verde-500: #AFCB1F;   /* print / physical lime               */
  --tg-verde-400: #AFF22C;   /* PRIMARY accent — web lime           */
  --tg-verde-300: #C9F76B;
  --tg-verde-200: #E3FBAE;
  --tg-verde-100: #F2FDD9;

  /* --- Neutrals · Grafite scale --- */
  --tg-grafite-900: #1C1C1B;
  --tg-grafite-800: #272725;   /* brand grafite — primary ink         */
  --tg-grafite-700: #3D3D3A;
  --tg-grafite-500: #6B6B66;
  --tg-grafite-400: #93938C;
  --tg-grafite-300: #C2C2BC;
  --tg-grafite-200: #DCDCD8;
  --tg-cinza-100: #E5E5E5;     /* tons claros — web                   */
  --tg-cinza-50:  #F4F4F2;
  --tg-branco:    #FFFFFF;

  /* --- Accent set (events / Olimpíada product + app tones) --- */
  --tg-magenta: #F900CA;
  --tg-laranja: #F4AB00;   /* also the T$ coin / warning            */
  --tg-azul:    #00DAE3;   /* also "info"; Ilha do Cuidado tone      */

  /* ---------- SEMANTIC ALIASES ---------- */
  /* Brand */
  --tg-primary:        var(--tg-roxo-500);
  --tg-primary-hover:  var(--tg-roxo-600);
  --tg-primary-press:  var(--tg-roxo-700);
  --tg-primary-soft:   var(--tg-roxo-100);
  --tg-accent:         var(--tg-verde-400);
  --tg-accent-ink:     var(--tg-grafite-800); /* text ON lime         */

  /* Text */
  --tg-text:           var(--tg-grafite-800);
  --tg-text-muted:     var(--tg-grafite-500);
  --tg-text-subtle:    var(--tg-grafite-400);
  --tg-text-on-roxo:   var(--tg-branco);
  --tg-text-on-accent: var(--tg-grafite-800);

  /* Surfaces */
  --tg-bg:             var(--tg-cinza-50);
  --tg-surface:        var(--tg-branco);
  --tg-surface-tint:   var(--tg-roxo-100);
  --tg-surface-dark:   var(--tg-roxo-900);
  --tg-border:         var(--tg-grafite-200);
  --tg-border-strong:  var(--tg-grafite-300);

  /* Allowed full-page backgrounds — the system varies ONLY between these four.
     Never a pure black/grafite ground. Dark = roxo. */
  --tg-bg-verde:        var(--tg-verde-400);   /* lime — text/icons in grafite      */
  --tg-bg-cinza:        var(--tg-cinza-50);    /* light grey — default neutral page */
  --tg-bg-roxo-claro:   var(--tg-roxo-500);    /* #7228F3 — roxo claro (primary)    */
  --tg-bg-roxo-escuro:  var(--tg-roxo-700);    /* #4C19B2 — roxo escuro             */

  /* Feedback (kept positive & friendly per voice) */
  --tg-success:  #1FA85A;
  --tg-warning:  var(--tg-laranja);
  --tg-danger:   #E23D6B;
  --tg-info:     var(--tg-azul);

  /* Currency — the Tangrans (T$) */
  --tg-coin:       var(--tg-laranja);
  --tg-coin-deep:  #C98700;
}