/* ============================================================
   CHEER DESIGN — Color tokens
   ------------------------------------------------------------
   "Amarelo como acento pontual — linhas, números e destaques.
    Preto e branco sustentam; lilás, azul e ciano categorizam."

   Yellow is a punctual accent (lines, numbers, highlights).
   Black & white carry the system; lilac, blue and cyan
   categorize. Use support colors to label / group, never as
   large flat fills competing with the accent.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --cheer-black: #000000;   /* Preto — primary base            */
  --cheer-white: #ffffff;   /* Branco — primary base           */
  --cheer-yellow: #fecb39;  /* Amarelo — primary accent        */

  /* ---- Brand support (the "categorize" palette) ---- */
  --cheer-lilac: #d0a4cc;   /* Lilás                           */
  --cheer-blue:  #2864ae;   /* Azul                            */
  --cheer-cyan:  #74c9de;   /* Ciano                           */

  /* ---- Support tints (soft fills, chip backgrounds) ---- */
  --cheer-yellow-soft: #fff1c6;
  --cheer-lilac-soft:  #f1e3f0;
  --cheer-blue-soft:   #dbe6f4;
  --cheer-cyan-soft:   #e1f3f8;

  /* ---- Support deep (text / icons on tinted fills) ---- */
  --cheer-yellow-deep: #8a6a00;
  --cheer-lilac-deep:  #7a4f76;
  --cheer-blue-deep:   #1b4376;
  --cheer-cyan-deep:   #2e7e93;

  /* ---- Neutral scale (warm-cool grey, anchored to pure black) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7f8;
  --neutral-100: #efeff1;
  --neutral-200: #e2e2e6;
  --neutral-300: #cfcfd5;
  --neutral-400: #a8a8b0;
  --neutral-500: #7c7c85;
  --neutral-600: #56565e;
  --neutral-700: #3a3a40;
  --neutral-800: #222226;
  --neutral-900: #0e0e10;
  --neutral-1000: #000000;

  /* ---- Semantic: text ---- */
  --text-primary:   var(--cheer-black);
  --text-secondary: var(--neutral-600);
  --text-tertiary:  var(--neutral-500);
  --text-on-dark:   var(--cheer-white);
  --text-on-accent: var(--cheer-black);   /* black on yellow  */
  --text-accent:    var(--cheer-blue);    /* links / emphasis */

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--cheer-white);
  --surface-card:    var(--cheer-white);
  --surface-sunken:  var(--neutral-50);
  --surface-inverse: var(--cheer-black);
  --surface-accent:  var(--cheer-yellow);

  /* ---- Semantic: lines & borders ---- */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--cheer-black);

  /* ---- Semantic: status (built from brand palette) ---- */
  --status-info:    var(--cheer-blue);
  --status-info-bg: var(--cheer-blue-soft);
  --status-ok:      #2e8a5b;
  --status-ok-bg:   #dff0e6;
  --status-warn:    var(--cheer-yellow-deep);
  --status-warn-bg: var(--cheer-yellow-soft);
  --status-error:   #c8402f;
  --status-error-bg:#fbe4e0;

  /* ---- The signature rainbow gradient (degradê arco-íris) ----
     Amarelo → Lilás → Azul → Ciano. Used for the badge ring,
     photo frames and accent strokes. */
  --cheer-gradient: linear-gradient(
    90deg,
    var(--cheer-yellow) 0%,
    var(--cheer-lilac) 38%,
    var(--cheer-blue) 70%,
    var(--cheer-cyan) 100%
  );
  --cheer-gradient-conic: conic-gradient(
    from 200deg,
    var(--cheer-yellow),
    var(--cheer-lilac),
    var(--cheer-blue),
    var(--cheer-cyan),
    var(--cheer-yellow)
  );
}