/* ============================================================
   AI Talent Mapping — Design Tokens
   Palet "Growth & Synergy"
   ============================================================ */

:root {
  /* --- Brand palette (per Rancangan, Bab 2.2) --- */
  --c-bg: #FAFAF7;          /* Off White  — background utama */
  --c-bg-soft: #E8E9E3;     /* Soft Sage  — card/section, table stripe */
  --c-accent: #94A684;      /* Sage Green — aksen, hover, border aktif, Low Gap */
  --c-primary: #6B7A5C;     /* Deep Olive — tombol utama, navbar, link aktif */
  --c-ink: #2C3625;         /* Dark Forest — teks utama/heading, footer */
  --c-danger: #C0504D;      /* Warm Red  — badge High Gap */
  --c-warning: #E0A458;     /* Amber     — badge Medium Gap, highlight skor */

  /* --- Derived tones (kept inside the palette family, no foreign hues) --- */
  --c-primary-dark: #56624A;
  --c-accent-soft: #DCE3D4;
  --c-ink-soft: #5B6B52;
  --c-border: #D8DACF;
  --c-white: #FFFFFF;

  /* --- Typography --- */
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* --- Radius / shadow / motion --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(44, 54, 37, 0.06);
  --shadow-md: 0 8px 24px rgba(44, 54, 37, 0.08);
  --shadow-lg: 0 16px 40px rgba(44, 54, 37, 0.12);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Map onto Bootstrap's own CSS variables so utility classes inherit it --- */
  --bs-body-bg: var(--c-bg);
  --bs-body-color: var(--c-ink);
  --bs-body-font-family: var(--font-body);
  --bs-heading-color: var(--c-ink);
  --bs-border-color: var(--c-border);
  --bs-primary: #6B7A5C;
  --bs-primary-rgb: 107, 122, 92;
  --bs-secondary: #5B6B52;
  --bs-link-color: var(--c-primary);
  --bs-link-hover-color: var(--c-ink);
  --bs-link-color-rgb: 107, 122, 92;
}