/* ============================================================
   CareerSafar Design System
   Source of truth: journey.html (My Career Journey page).
   Every page loads this BEFORE its own <style> block.
   ------------------------------------------------------------
   Palette   : warm paper + charcoal ink + indigo accent
   Type      : Archivo (body/UI) + Archivo Expanded (display)
   Radius    : 20px cards · 14px panels/inputs-lg · 10px inputs · 999px pills
   Shadow    : one soft card shadow only
   ============================================================ */

:root{
  /* color tokens (journey palette) */
  --paper:#faf9f7;        /* page background inside the app shell */
  --ink:#1d1c1a;          /* primary text */
  --ink2:#3d3a35;         /* secondary headings */
  --mut:#807c74;          /* muted body text */
  --faint:#a39e94;        /* faint captions / placeholders */
  --hair:#e8e5de;         /* hairline borders */
  --hair2:#e2ded6;        /* slightly stronger hairline */
  --panel:#f2f0eb;        /* inset panel background */
  --accent:#5653d6;       /* indigo accent */
  --accent-d:#4340c4;     /* accent hover */
  --accent-2:#6f6ce0;     /* accent light (progress ends) */
  --soft:rgba(86,83,214,.10);   /* accent tint background */
  --soft2:rgba(86,83,214,.16);
  --outer:#e9e8f3;        /* body background outside the shell */
  --ok:#2f7a53;           /* success (muted green) */
  --warn:#c67b12;         /* warning (muted amber) */
  --danger:#a83a32;       /* error (muted red) */

  /* radius scale */
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-full:999px;

  /* one shadow system */
  --shadow-card:0 1px 2px rgba(29,28,26,.04),0 8px 28px rgba(29,28,26,.05);
  --shadow-pop:0 12px 40px rgba(29,28,26,.10);

  /* motion */
  --t-fast:.18s ease;
  --t-med:.3s ease;
}

/* ---------- base type ---------- */
.ds-body{font-family:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.5}
.exp{font-family:'Archivo Expanded','Archivo',sans-serif;letter-spacing:-.02em;font-style:normal}

/* heading hierarchy */
.ds-h1{font-family:'Archivo Expanded','Archivo',sans-serif;letter-spacing:-.02em;font-weight:800;font-size:clamp(28px,6vw,38px);line-height:1.12;color:var(--ink)}
.ds-h2{font-family:'Archivo Expanded','Archivo',sans-serif;letter-spacing:-.02em;font-weight:800;font-size:clamp(20px,3.4vw,26px);line-height:1.2;color:var(--ink)}
.ds-h3{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.ds-body-text{font-size:15px;line-height:1.55;color:var(--mut)}
.ds-caption{font-size:13px;color:var(--faint)}
.ds-eyebrow{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.ds-eyebrow-accent{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}

/* ---------- buttons ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-full);
  font-family:inherit;font-weight:600;font-size:15px;padding:14px 26px;border:1px solid transparent;
  cursor:pointer;transition:all var(--t-fast);text-decoration:none}
.ds-btn:active{transform:scale(.98)}
.ds-btn-primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px -12px rgba(86,83,214,.7)}
.ds-btn-primary:hover{background:var(--accent-d)}
.ds-btn-secondary{background:#fff;color:var(--ink);border-color:var(--hair2)}
.ds-btn-secondary:hover{border-color:#b8b2a6}
.ds-btn-dark{background:var(--ink);color:var(--paper)}
.ds-btn-quiet{background:transparent;color:var(--mut);border-color:transparent}
.ds-btn-quiet:hover{color:var(--ink)}

/* ---------- cards & panels ---------- */
.ds-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-card)}
.ds-panel{background:var(--panel);border-radius:var(--r-md);padding:16px 18px;color:#5c5850}

/* ---------- inputs ---------- */
.ds-input{font-family:inherit;font-size:14px;padding:9px 14px;border:1px solid #cfc9be;border-radius:var(--r-sm);
  background:#fff;color:var(--ink);outline:none;min-width:0;transition:border-color var(--t-fast)}
.ds-input:focus{border-color:var(--accent)}

/* ---------- chips / pills / badges ---------- */
.ds-chip{font-size:13.5px;padding:7px 14px;border:1px solid var(--hair2);border-radius:var(--r-full);
  color:#5c5850;cursor:pointer;background:transparent;font-family:inherit;transition:all var(--t-fast)}
.ds-chip:hover{border-color:#b8b2a6;background:var(--paper)}
.ds-pill-on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.ds-badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent);background:var(--soft);padding:5px 11px;border-radius:var(--r-full)}

/* ---------- progress ---------- */
.ds-track{height:6px;background:#eceaf6;border-radius:var(--r-full);overflow:hidden}
.ds-fill{height:100%;background:var(--accent);border-radius:var(--r-full);transition:width .4s cubic-bezier(.4,0,.2,1)}

/* ---------- motion ---------- */
@keyframes ds-fadeup{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ds-fadeup{animation:ds-fadeup .3s ease}