/* ============================================================
   Olimpiada Tangram - Color Tokens
   Brand of Brazil's largest digital financial-education olympiad.
   Deep navy is the signature ground; a bright confetti palette
   (yellow, lime, cyan, purple, green) supplies the energy.
   ============================================================ */

:root {
  /* ---- Core brand palette (from "Paleta de cores Olimpiada") ---- */
  --tg-navy:          #0a0080; /* Azul escuro - the primary brand color */
  --tg-navy-deep:     #050048; /* deeper navy for shadows / layered depth */
  --tg-navy-bright:   #1234a8; /* lighter navy - end of the brand gradient */

  --tg-purple:        #7228f3; /* Roxo */
  --tg-purple-light:  #ae8bff; /* Roxo claro */
  --tg-purple-deep:   #4c19b2; /* deep purple surface (used on dark slides) */

  --tg-yellow:        #ffe600; /* Amarelo - highest-energy highlight */
  --tg-lime:          #aff22c; /* Verde limao */
  --tg-green:         #3fa25a; /* Verde */

  --tg-cyan:          #00bcff; /* Azul ciano - confetti / rays accent */
  --tg-cyan-light:    #72e3ff;
  --tg-cyan-pale:     #c6f4ff;

  --tg-white:         #ffffff;
  --tg-black:         #000000;

  /* ---- Cool neutrals (navy-tinted, for light surfaces) ---- */
  --tg-ink:           #12123f; /* near-black navy - body text on light */
  --tg-slate:         #5a5a86; /* muted text on light */
  --tg-mist:          #e6e6f4; /* hairline borders / dividers on light */
  --tg-cloud:         #f3f3fb; /* very light lavender-white surface */
  --tg-fog:           #d9d9ec; /* disabled / inactive on light */

  /* ---- Brand gradients ---- */
  --tg-gradient-navy:  linear-gradient(150deg, #0a0080 0%, #1234a8 100%); /* @kind color */
  --tg-gradient-cyan:  linear-gradient(150deg, #a7dff4 0%, #00bcff 100%); /* @kind color */
  --tg-gradient-hero:  radial-gradient(120% 90% at 30% 15%, #1531a3 0%, #0a0080 55%, #070056 100%); /* @kind color */
  --tg-gradient-purple:linear-gradient(150deg, #4c19b2 0%, #7228f3 100%); /* @kind color */
  --tg-gradient-lime:  linear-gradient(90deg, #aff22c 0%, #6fd44a 100%); /* @kind color */

  /* ============================================================
     Semantic aliases - reference these in components
     ============================================================ */

  /* Backgrounds */
  --tg-bg:            var(--tg-navy);      /* default brand ground (dark) */
  --tg-bg-alt:        var(--tg-navy-deep);
  --tg-bg-light:      var(--tg-white);     /* light-mode ground */
  --tg-bg-light-alt:  var(--tg-cloud);

  /* Surfaces (cards, panels) */
  --tg-surface:            var(--tg-white);
  --tg-surface-muted:      var(--tg-cloud);
  --tg-surface-on-dark:    rgba(255, 255, 255, 0.08); /* glass card on navy */
  --tg-surface-on-dark-2:  rgba(255, 255, 255, 0.14);

  /* Text on dark (navy) ground */
  --tg-text:              var(--tg-white);
  --tg-text-muted:        rgba(255, 255, 255, 0.72);
  --tg-text-subtle:       rgba(255, 255, 255, 0.55);

  /* Text on light ground */
  --tg-text-on-light:        var(--tg-ink);
  --tg-text-on-light-muted:  var(--tg-slate);

  /* Interactive accent - yellow is the primary call-to-action colour */
  --tg-accent:            var(--tg-yellow);
  --tg-accent-ink:        var(--tg-navy);   /* text/icon that sits on --tg-accent */
  --tg-accent-2:          var(--tg-lime);
  --tg-accent-3:          var(--tg-cyan);

  /* Borders & focus */
  --tg-border:            var(--tg-mist);
  --tg-border-on-dark:    rgba(255, 255, 255, 0.18);
  --tg-focus-ring:        var(--tg-cyan);

  /* Status */
  --tg-success:           var(--tg-green);
  --tg-warning:           #ff9e2c;
  --tg-danger:            #ff4d6d;
  --tg-info:              var(--tg-cyan);
}