/* ============================================================
   PESQUISA & DADOS — COLOR TOKENS
   Derived from the brand logo gradient (deep ink → teal mint),
   the production stylesheet (static/css/styles.css) and the
   institutional deck theme (pesquisaedados_nov2025.pptx).
   ============================================================ */

:root {
  /* ---- Brand teal scale (the logo gradient) ---------------- */
  --teal-50:  #EEFAF7;
  --teal-100: #D4F2EB;
  --teal-200: #A3E3D5;   /* primary-light  */
  --teal-300: #85D8C8;   /* PRIMARY  — logo mint, app --primary-color */
  --teal-400: #6BC4B3;   /* primary-dark */
  --teal-500: #5FBFAD;   /* secondary-color */
  --teal-600: #4DA793;   /* accent-color */
  --teal-700: #127864;   /* deep teal — deck theme accent */
  --teal-800: #0E5A4B;
  --teal-900: #0A3D33;

  /* ---- Ink / navy scale (wordmark + body text) ------------- */
  --ink-900: #0E0E27;    /* deck darkest navy — wordmark */
  --ink-800: #1A252F;    /* hover navy */
  --ink-700: #2C3E50;    /* headings, person icons */
  --ink-600: #495252;    /* muted heading */
  --ink-500: #4F5151;    /* deck neutral gray */
  --ink-400: #6C757D;    /* secondary text (Bootstrap gray-600) */

  /* ---- Neutral / surface scale ----------------------------- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F8F9FA;   /* page tint, table head */
  --neutral-100: #F1F3F5;
  --neutral-200: #E9ECEF;   /* input borders */
  --neutral-300: #DEE2E6;   /* dividers, table borders */
  --neutral-400: #CED4DA;
  --neutral-500: #ADB5BD;
  --neutral-600: #D0D0D0;   /* deck light gray */

  /* ---- Semantic / status (Bootstrap 5 lineage) ------------- */
  --danger:  #DC3545;
  --warning: #FFC107;
  --success: #198754;
  --info:    #0DCAF0;

  /* ---- Brand gradients ------------------------------------- */
  /* Button / CTA — 135° mint → secondary */
  --gradient-brand: linear-gradient(135deg, var(--teal-300) 0%, var(--teal-500) 100%);
  /* Button hover — deepens one stop */
  --gradient-brand-hover: linear-gradient(135deg, var(--teal-400) 0%, var(--teal-600) 100%);
  /* Card top accent bar — tri-stop sweep */
  --gradient-accent-bar: linear-gradient(90deg, var(--teal-300) 0%, var(--teal-500) 50%, var(--teal-600) 100%);
  /* Hero / auth background wash */
  --gradient-surface: linear-gradient(135deg, var(--teal-300) 0%, var(--teal-500) 100%);
  /* The logo's signature ink→mint diagonal (for marks & headers) */
  --gradient-logo: linear-gradient(135deg, var(--ink-900) 0%, var(--teal-700) 45%, var(--teal-300) 100%);

  /* ============================================================
     SEMANTIC ALIASES — reference these in components, not raw scale
     ============================================================ */
  --color-primary:        var(--teal-300);
  --color-primary-strong: var(--teal-500);
  --color-primary-deep:   var(--teal-700);
  --color-accent:         var(--teal-600);

  --text-strong:   var(--ink-900);   /* display / wordmark */
  --text-heading:  var(--ink-700);   /* section headings */
  --text-body:     var(--ink-800);   /* paragraph copy */
  --text-muted:    var(--ink-400);   /* captions, helper text */
  --text-on-brand: var(--neutral-0); /* text over teal surfaces */
  --text-link:     var(--teal-600);

  --surface-page:    var(--neutral-50);
  --surface-card:    rgba(255, 255, 255, 0.95);
  --surface-raised:  var(--neutral-0);
  --surface-sunken:  var(--neutral-50);
  --surface-dark:    var(--ink-900);   /* navbar / footer bg */
  --surface-tint:    var(--teal-50);

  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-focus:  var(--teal-300);

  --focus-ring:    rgba(133, 216, 200, 0.25);
  --shadow-brand:  rgba(133, 216, 200, 0.30);
}