/* ============================================================
   STUNIO — COLOR TOKENS
   Sourced from core_packages/stunio_lib:
     - global_colors.dart + helper_theme.dart  (Stunio Helper, student app)
     - client_colors.dart + client_theme.dart  (Stunio Client, business web)
   Brand blue is the constant; navy anchors text, purple powers the
   signature blue→purple gradient.
   ============================================================ */

:root {
  /* ---- BRAND BLUES ---- */
  --blue-electric: #1645D3;   /* primary action — electricBlue */
  --blue-navy:     #003087;   /* headings, brand text — darkBlue */
  --blue-bright:   #1E6AF3;   /* client primary — primaryBlue */
  --blue-component:#2563EB;   /* component / link blue */
  --blue-royal:    #1E40AF;   /* royalBlue */
  --blue-drawer:   #1A3F71;   /* nav / drawer */
  --blue-sidebar:  #0F2851;   /* client sidebar dark */
  --portal-navy:   #1C2E50;   /* Early Talent Portal top bar (current product) */
  --portal-navy-2: #243a63;   /* hover / lighter band on the navy bar */
  --portal-green:  #17443B;   /* legacy Talent Development Portal bar (forest/pine) */
  --portal-green-2:#1E5246;   /* hover / lighter band */
  --blue-gradient-from: #1447E6;
  --blue-gradient-to:   #8200DB;

  /* ---- TINTS ---- */
  --blue-sky:      #94CBFF;
  --blue-light:    #C7E4FF;
  --blue-grey:     #E3E7F5;   /* borders, soft surfaces — blueGrey */
  --blue-pale:     #E8F0FE;   /* info / highlight card fill */
  --blue-text:     #BFDBFE;

  /* ---- ACCENTS ---- */
  --purple:        #6A5CFD;   /* secondaryPurple */
  --teal:          #2DD4BF;   /* progress / data viz accent (Figma) */
  --yellow-spirit: #E0FE68;   /* electricYellow — brand spirit pop */

  /* ---- NEUTRALS (warm-cool slate scale) ---- */
  --white:   #FFFFFF;
  --black:   #000000;
  --gray-50: #FAFAFA;
  --gray-100:#F5F6FA;
  --gray-150:#F8FAFC;
  --gray-200:#E9EBEF;
  --gray-250:#E2E8F0;
  --gray-300:#D4D8E0;
  --gray-400:#A4AAB6;
  --gray-500:#6E7480;
  --gray-600:#6B7280;
  --gray-700:#374151;
  --gray-800:#1E293B;
  --gray-900:#111827;
  --gray-stone: #EDEDE9;      /* grey — quiet warm divider */
  --gray-mid:   #929AA3;      /* midGrey — placeholder/disabled text */
  --gray-slate: #475569;      /* body text on client surfaces */

  /* ---- SEMANTIC ---- */
  --success:        #10B981;  /* client success */
  --success-check:  #4FA25C;  /* helper "Check In" green */
  --success-bg:     #D1FAE5;
  --warning:        #F59E0B;
  --warning-bg:     #FEF3C7;
  --error:          #FF4438;  /* brand red */
  --error-soft:     #EF4444;  /* client error */
  --error-bg:       #FEE2E2;
  --info:           #3B82F6;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --color-primary:        var(--blue-electric);
  --color-primary-strong: var(--blue-navy);
  --color-primary-bright: var(--blue-bright);
  --color-accent:         var(--purple);

  --gradient-brand: linear-gradient(90deg, var(--blue-gradient-from) 0%, var(--blue-gradient-to) 100%);
  --gradient-brand-diag: linear-gradient(135deg, var(--blue-gradient-from) 0%, var(--blue-gradient-to) 100%);

  /* text */
  --text-heading:   var(--blue-navy);
  --text-body:      var(--gray-slate);
  --text-strong:    var(--gray-800);
  --text-muted:     var(--gray-500);
  --text-placeholder: var(--gray-mid);
  --text-on-brand:  var(--white);
  --text-link:      var(--blue-electric);

  /* surfaces */
  --surface-page:   var(--gray-50);
  --surface-page-blue: var(--blue-grey);   /* client scaffold */
  --surface-card:   var(--white);
  --surface-alt:    var(--gray-150);
  --surface-info:   var(--blue-pale);
  --surface-sidebar:var(--blue-sidebar);
  --surface-portal: var(--portal-navy);

  /* lines */
  --border-subtle:  var(--gray-200);
  --border-soft:    var(--gray-250);
  --border-blue:    var(--blue-grey);
  --border-strong:  var(--gray-300);

  /* states */
  --state-hover-tint:  rgba(22, 69, 211, 0.08);
  --state-press-tint:  rgba(22, 69, 211, 0.20);
  --focus-ring:        rgba(22, 69, 211, 0.35);
}