/* ============================================================================
   AksesKerja Design System — Color Tokens
   Brand, semantic status, surfaces, and neutral scales (cool slate)
   ============================================================================ */

:root {
  /* ---- Brand Color System -------------------------------------------------- */
  /* AksesKerja Blue — the commanding primary color for all CTAs, active states,
     progress indicators, links, and brand moments. */
  --brand-blue:        #2563EB;   /* primary — CTAs, active nav, progress, links */
  --brand-blue-hover:  #1D4ED8;   /* hover state for solid blue buttons */
  --brand-blue-dark:   #1E40AF;   /* pressed / emphatic / dark contexts */
  --brand-blue-light:  #EFF6FF;   /* tonal fill behind blue text (chips, active tab) */

  /* Navy and charcoal for emphasis and floating contexts. */
  --brand-navy:        #1E3A8A;   /* detail-pane page-title headings */
  --brand-charcoal:    #1E293B;   /* dark floating toolbars / contextual bars */

  /* Secondary accent — teal for success and secondary visual hierarchy. */
  --brand-teal:        #008080;   /* secondary accent */
  --brand-teal-accent: #08E9B2;   /* bright teal — gradient / branding spark (logo only) */

  /* ---- Semantic Status Colors ---------------------------------------------- */
  /* Clear, high-contrast status signifiers. */
  --success:           #10B981;   /* "Hired", proceed, WhatsApp ring, online status */
  --success-soft:      #ECFDF5;   /* soft background for success messages */
  --warning:           #F59E0B;   /* skill-gap rows, "complete the JD" hints, caution */
  --warning-soft:      #FFFBEB;   /* soft background for warnings */
  --danger:            #DC2626;   /* "Tolak" (reject), critical warnings, errors */
  --danger-strong:     #EF4444;   /* emphasis for danger */
  --danger-soft:       #FEF2F2;   /* soft background for danger messages */

  /* ---- Surface Colors ------------------------------------------------------ */
  /* Application floor, card backgrounds, and contextual panels. */
  --bg-app:            #F8FAFC;   /* slate-50 — main workspace / page background */
  --bg-tinted:         #F0F7FF;   /* blue-tinted filter & info panels */
  --bg-tinted-2:       #F8FAFF;   /* slate-indigo — detail-pane rail background */
  --surface:           #FFFFFF;   /* white — cards, nav, modal, panels */
  --surface-muted:     #F8FAFC;   /* slate-50 — zebra rows, inset wells, input fills */

  /* ---- Neutral / Text Scale (cool slate) ----------------------------------- */
  /* Cool slate neutrals for text, borders, and UI dividers. Intentionally cool
     (never warm gray) to harmonize with the cool-toned brand blue. */
  --ink-900:           #0F172A;   /* darkest text, maximum contrast */
  --ink-800:           #1E293B;   /* headings, strong emphasis */
  --ink-700:           #334155;   /* secondary headings, bold text */
  --ink-600:           #475569;   /* body copy */
  --ink-500:           #64748B;   /* secondary / metadata text */
  --ink-400:           #94A3B8;   /* placeholder, disabled, UPPERCASE eyebrows */
  --ink-300:           #CBD5E1;   /* scrollbars, subtle dividers */
  --border:            #E2E8F0;   /* slate-200 — the workhorse 1px outline for rows & cards */
  --border-soft:       #F1F5F9;   /* slate-100 — inner dividers, subtle separators */
}