/* ============================================================
   Mixart — Color tokens · Brandguide V1.0 (CADMO, 2026)
   Dark & premium. Solid black base (#010101 — NOT #000000),
   yellow is the PROTAGONIST but used with discipline: accents,
   CTAs, active states — never body text, glow, or full-section
   background. Text/icons on yellow are ALWAYS black.
   FORBIDDEN: old gold #D4AF37/#C9A030, navy #0A0E1A/#121E3A,
   and #000000/#111111/#262626 in new code.
   ============================================================ */
:root {
  /* ---- Cores principais ---- */
  --color-brand:        #FFC73B;                 /* Amarelo Mixart · CTAs, ativo, destaque */
  --color-brand-hover:  #FFD160;                 /* solid-yellow hover (≈ brightness 1.08) */
  --color-brand-dim:    rgba(255, 199, 59, .45); /* outline pills, muted yellow strokes    */
  --color-brand-sub:    rgba(255, 199, 59, .08); /* yellow tint fills (banners), washes    */
  --color-on-brand:     #010101;                 /* text / icons on yellow = ALWAYS black  */
  --color-brand-on-light: #CF9A12;               /* yellow content over off-white surfaces */

  /* ---- Fundo & superfícies (escuras) ---- */
  --color-bg:           #010101;                 /* page background (Preto — not #000000)  */
  --color-surface:      #0F0F0F;                 /* cards, sheets, tiles, inputs           */
  --color-surface-hi:   #1F1F1F;                 /* chips, nested inputs, secondary pills  */
  --color-surface-trans: rgba(255, 255, 255, .03); /* glassy cards (testimonials)          */

  /* ---- Superfície clara ("holofote", ex.: balão do Radar) ---- */
  --color-surface-light: #F4F1EA;                /* Off-White as a surface                 */
  --color-ink-on-light:  #010101;                /* primary text on off-white              */
  --color-muted-on-light: #6E6E6E;               /* secondary text on off-white            */

  /* ---- Texto (sobre escuro) ---- */
  --color-text:         #F4F1EA;                 /* Off-White · primary copy               */
  --color-text-muted:   #9CA3AF;                 /* secondary, captions, meta               */
  --color-text-faint:   #6B7280;                 /* tertiary / disabled                    */
  --color-text-hint:    #4B5563;                 /* placeholders, hints                    */
  --color-white:        #FFFFFF;                 /* pontual (logo negativo, Figma Formações)*/

  /* ---- Bordas / divisores ---- */
  --color-border:       #1F1F1F;                 /* official border & divider              */
  --color-border-hi:    rgba(255, 255, 255, .12);/* emphasized hairline (hover)            */

  /* ---- Status (semantic, pontual — never compete with yellow) ---- */
  --color-success: #34D399;
  --color-danger:  #F87171;   /* errors; also "curtir" active           */
  --color-warning: #FBBF24;   /* amber warnings                          */
  --color-info:    #60A5FA;

  /* ---- Photo overlays (FLAT, never gradient) ---- */
  --overlay-photo:        rgba(6, 6, 6, .58);
  --overlay-photo-strong: rgba(6, 6, 6, .82);

  /* ============================================================
     Semantic aliases — prefer these in components
     ============================================================ */
  --bg-page:          var(--color-bg);
  --bg-section-alt:   var(--color-surface);
  --surface-card:     var(--color-surface);
  --surface-raised:   var(--color-surface-hi);
  --surface-input:    var(--color-surface);
  --surface-glass:    var(--color-surface-trans);
  --surface-spotlight: var(--color-surface-light);

  --text-primary:     var(--color-text);
  --text-secondary:   var(--color-text-muted);
  --text-disabled:    var(--color-text-faint);
  --text-on-accent:   var(--color-on-brand);

  --border-subtle:    var(--color-border);
  --border-strong:    var(--color-border-hi);

  --accent:           var(--color-brand);
  --accent-contrast:  var(--color-on-brand);
  --focus-ring:       var(--color-brand);
}