/* ============================================================
   CRAQUE CIDADÃO — COLOR TOKENS
   Brand palette derived from the institutional emblem:
   vivid azure, deep navy, soft sky blue. Warm gold accent
   carries energy + donation calls-to-action.
   ============================================================ */
:root {
  /* ---- Brand blues (primary scale) ---- */
  --blue-50:  #EEF4FB;
  --blue-100: #DCEAF7;
  --blue-200: #B9CDE8;
  --blue-300: #80A0D0;  /* sky from emblem */
  --blue-400: #3E8FD2;
  --blue-500: #1380CB;
  --blue-600: #0070C0;  /* core institutional azure */
  --blue-700: #015AA0;
  --blue-800: #0A4A82;

  /* ---- Navy (emblem base band) ---- */
  --navy-700: #244A86;
  --navy-800: #204070;
  --navy-900: #18315A;
  --navy-950: #112440;

  /* ---- Warm accent (energy / donate) ---- */
  --gold-300: #FFD98A;
  --gold-400: #FAC04A;
  --gold-500: #F2A900;  /* core accent */
  --gold-600: #D88F00;

  /* ---- Neutrals (cool, blue-leaning grays) ---- */
  --ink-900: #14233B;
  --ink-700: #34435C;
  --ink-500: #647088;
  --ink-400: #8B95A8;
  --ink-300: #B6BFCE;
  --ink-200: #DCE2EC;
  --ink-100: #EDF1F7;
  --paper:   #FFFFFF;
  --paper-2: #F4F7FB;   /* page wash */
  --paper-3: #E9F0F8;   /* sky surface */

  /* ---- Semantic status ---- */
  --green-500: #2E9E5B;
  --green-50:  #E6F4EC;
  --amber-500: #E8A317;
  --amber-50:  #FCF2DC;
  --red-500:   #D2483F;
  --red-50:    #FBE9E7;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --brand:          var(--blue-600);
  --brand-hover:    var(--blue-700);
  --brand-active:   var(--blue-800);
  --brand-ink:      var(--navy-900);   /* headings / deep brand */
  --brand-soft:     var(--blue-50);    /* tinted brand surface */
  --accent:         var(--gold-500);
  --accent-hover:   var(--gold-600);
  --accent-ink:     var(--navy-950);   /* text on gold */

  --text-strong:    var(--ink-900);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-on-brand:  #FFFFFF;
  --text-on-accent: var(--navy-950);
  --text-link:      var(--blue-600);

  --surface-page:   var(--paper-2);
  --surface-card:   var(--paper);
  --surface-sky:    var(--paper-3);
  --surface-brand:  var(--blue-600);
  --surface-navy:   var(--navy-900);

  --border:         var(--ink-200);
  --border-strong:  var(--ink-300);
  --divider:        var(--ink-100);

  --focus-ring:     color-mix(in srgb, var(--blue-600) 45%, transparent);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
}