/* ===========================================================================
   WareSpace Onboarding — Design System (v1)
   The shared visual language: tokens + components. "Professional" gamification
   (Uxcel/Codecademy direction) — levels, badges, certificate, restrained XP —
   built on the existing navy/teal brand. This file is the source of truth;
   surfaces adopt these tokens and `ds-*` components one at a time.

   Loaded today only by design.html (the living style guide) so it can't
   regress the live pages. As each surface is refactored, it moves onto these.
   =========================================================================== */
:root {
  /* ---- Brand (WareSpace official: navy + green) -------------------------
     Mapped from the WareSpace living design system. `--ds-teal*` is kept as
     the accent variable name but now holds the brand GREEN, so existing
     gradients/eyebrows/progress repoint to green without renaming. */
  --ds-navy: #102442;   --ds-navy-700: #0a1830;  --ds-navy-300: #1c274c;
  --ds-teal: #00aa6c;   --ds-teal-700: #0b8e5f;
  /* explicit green ramp (green-40 → green-120) */
  --ds-green-40:#e6f4eb; --ds-green-60:#c6ebd7; --ds-green-80:#19ce8c;
  --ds-green-90:#3dbe7a; --ds-green:#00aa6c; --ds-green-120:#0b8e5f;

  /* ---- Neutral ramp (WareSpace grays) ------------------------------------ */
  --ds-n0:  #ffffff;  --ds-n50: #f8f8f9;  --ds-n100:#f1f1f1;  --ds-n200:#dcdcdc;
  --ds-n300:#c6c6c6;  --ds-n400:#a8a8ad;  --ds-n500:#8a8a8a;  --ds-n600:#5a5f66;
  --ds-n700:#2a3540;  --ds-n800:#1a2530;  --ds-n900:#102442;

  /* ---- Semantic status --------------------------------------------------- */
  --ds-success:#0b8e5f;  --ds-success-bg:#e6f4eb;
  --ds-warning:#e6a53b;  --ds-warning-bg:#fdf2dd;
  --ds-danger: #e11717;  --ds-danger-bg: #fff4f4;
  --ds-info:   #2f6fd0;  --ds-info-bg:   #e6eefb;

  /* ---- Level tiers (the gamification spine) -----------------------------
     Green-led progression: Foundations → Core → Advanced → Mastery/Cert. */
  --ds-tier1:#00aa6c; --ds-tier1-bg:#e6f4eb;  /* Foundations  */
  --ds-tier2:#2f6fd0; --ds-tier2-bg:#e6eefb;  /* Core         */
  --ds-tier3:#6a5acd; --ds-tier3-bg:#ece8fb;  /* Advanced     */
  --ds-tier4:#e6a53b; --ds-tier4-bg:#fdf2dd;  /* Mastery/Cert */

  /* ---- Type scale (modular, ~1.25) --------------------------------------- */
  --ds-font-display:"Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-font-body:"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ds-fs-display:2.6rem; --ds-fs-h1:1.9rem; --ds-fs-h2:1.5rem; --ds-fs-h3:1.15rem;
  --ds-fs-body:1rem; --ds-fs-sm:0.88rem; --ds-fs-xs:0.76rem; --ds-fs-eyebrow:0.72rem;
  --ds-lh-tight:1.15; --ds-lh:1.5;
  --ds-fw-reg:400; --ds-fw-med:600; --ds-fw-bold:700; --ds-fw-black:800;

  /* ---- Spacing (4px base) ------------------------------------------------ */
  --ds-1:4px; --ds-2:8px; --ds-3:12px; --ds-4:16px; --ds-5:24px; --ds-6:32px; --ds-8:48px;

  /* ---- Radius (WareSpace: tight 4 · inner 6 · card 10 · pill) ------------- */
  --ds-r-sm:6px; --ds-r:10px; --ds-r-lg:14px; --ds-r-pill:999px; --ds-r-tight:4px;

  /* ---- Elevation (navy-tinted) ------------------------------------------- */
  --ds-e1:0 1px 2px rgba(16,36,66,.08);
  --ds-e2:0 4px 12px rgba(16,36,66,.10);
  --ds-e3:0 8px 24px rgba(16,36,66,.16);
}

/* WareSpace type: Poppins for headings/eyebrows, Roboto for body. */
body.ds-page { font-family: var(--ds-font-body); }
.ds-page h1, .ds-page h2, .ds-page h3, .ds-page h4,
.ws-hero-title, .ws-card-title, .ws-section-title, .sg-hero h1, .sg-section > h2 {
  font-family: var(--ds-font-display);
}

/* ===========================================================================
   COMPONENTS
   =========================================================================== */

/* ---- Status badges (COMPLETE / IN PROGRESS / LOCKED) --------------------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--ds-fs-eyebrow); font-weight: var(--ds-fw-black);
  letter-spacing: .6px; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--ds-r-pill);
}
.ds-badge.is-complete { background: var(--ds-success-bg); color: var(--ds-success); }
.ds-badge.is-progress { background: var(--ds-info-bg);    color: var(--ds-info); }
.ds-badge.is-locked   { background: var(--ds-n200);       color: var(--ds-n500); }
.ds-badge.is-new      { background: var(--ds-tier1-bg);   color: var(--ds-tier1); }
/* onboarding-flow states (used by the shared statusPill) */
.ds-badge.is-open     { background: var(--ds-tier1-bg);   color: var(--ds-tier1); }
.ds-badge.is-awaiting { background: var(--ds-warning-bg); color: var(--ds-warning); }

/* ---- Level / tier chip --------------------------------------------------- */
.ds-tier {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold);
  padding: 4px 11px; border-radius: var(--ds-r-pill);
}
.ds-tier::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ds-tier-1 { background: var(--ds-tier1-bg); color: var(--ds-tier1); }
.ds-tier-2 { background: var(--ds-tier2-bg); color: var(--ds-tier2); }
.ds-tier-3 { background: var(--ds-tier3-bg); color: var(--ds-tier3); }
.ds-tier-4 { background: var(--ds-tier4-bg); color: var(--ds-tier4); }

/* ---- XP chip (restrained — earned, not shouted) -------------------------- */
.ds-xp {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold);
  color: var(--ds-n700); background: var(--ds-n100);
  padding: 3px 9px; border-radius: var(--ds-r-pill);
}
.ds-xp::before { content: "✦"; color: var(--ds-tier4); }

/* ---- Level row (a lesson / module in a path) ----------------------------
   Uxcel-style: numbered marker, title + meta, trailing state. Three states. */
.ds-level {
  display: grid; grid-template-columns: 40px 1fr auto; gap: var(--ds-4);
  align-items: center; width: 100%; text-align: left;
  background: var(--ds-n0); border: 1px solid var(--ds-n200);
  border-radius: var(--ds-r); padding: 14px 16px; margin-bottom: 10px;
  font: inherit; color: var(--ds-n900); cursor: pointer;
  transition: transform .1s ease, box-shadow .2s, border-color .2s;
}
.ds-level:hover { transform: translateY(-1px); box-shadow: var(--ds-e2); border-color: var(--ds-navy); }
.ds-level-marker {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ds-n100); color: var(--ds-n600);
  font-weight: var(--ds-fw-black); font-size: var(--ds-fs-sm);
}
.ds-level-title { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-body); }
.ds-level-meta  { font-size: var(--ds-fs-xs); color: var(--ds-n600); margin-top: 2px; }
.ds-level.is-complete { background: var(--ds-success-bg); border-color: #cfe9d8; }
.ds-level.is-complete .ds-level-marker { background: var(--ds-success); color: #fff; }
.ds-level.is-current  { border-color: var(--ds-navy); box-shadow: 0 4px 16px rgba(16,36,66,.12); }
.ds-level.is-current  .ds-level-marker { background: var(--ds-navy); color: #fff; }
.ds-level.is-locked   { background: var(--ds-n50); cursor: not-allowed; color: var(--ds-n500); }
.ds-level.is-locked:hover { transform: none; box-shadow: none; border-color: var(--ds-n200); }
.ds-level.is-locked .ds-level-marker { background: var(--ds-n200); color: var(--ds-n500); }

/* ---- Skill progression bar (Beginner → Intermediate → Advanced) ---------- */
.ds-progression { display: flex; flex-direction: column; gap: 8px; }
.ds-prog-track { display: flex; gap: 5px; }
.ds-prog-seg { flex: 1; height: 7px; border-radius: var(--ds-r-pill); background: var(--ds-n200); }
.ds-prog-seg.on { background: linear-gradient(90deg, var(--ds-navy), var(--ds-teal)); }
.ds-prog-labels { display: flex; justify-content: space-between; font-size: var(--ds-fs-xs); color: var(--ds-n500); font-weight: var(--ds-fw-bold); }
.ds-prog-labels .on { color: var(--ds-navy); }

/* ---- Progress ring ------------------------------------------------------- */
.ds-ring .ring-bg { fill: none; stroke: var(--ds-n200); stroke-width: 6; }
.ds-ring .ring-fg { fill: none; stroke: var(--ds-teal); stroke-width: 6; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.ds-ring .ring-num { font-size: 15px; font-weight: var(--ds-fw-black); fill: var(--ds-navy); }

/* ---- Certificate card (Uxcel right-rail pattern) ------------------------- */
.ds-cert {
  border: 1px solid var(--ds-n200); border-radius: var(--ds-r-lg);
  background: var(--ds-n0); box-shadow: var(--ds-e1); overflow: hidden; max-width: 320px;
}
.ds-cert-top {
  position: relative; padding: 26px 20px; text-align: center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(0,170,108,.12), transparent 60%),
    var(--ds-n50);
  border-bottom: 1px solid var(--ds-n200);
}
.ds-cert-seal {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 12px;
  display: grid; place-items: center; font-size: 1.5rem; color: #fff;
  background: linear-gradient(135deg, var(--ds-navy), var(--ds-teal));
  box-shadow: 0 6px 16px rgba(16,36,66,.3);
}
.ds-cert.locked .ds-cert-seal { background: var(--ds-n300); color: var(--ds-n600); box-shadow: none; }
.ds-cert-title { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-h3); margin: 0; color: var(--ds-n900); }
.ds-cert-sub   { font-size: var(--ds-fs-sm); color: var(--ds-n600); margin: 4px 0 0; }
.ds-cert-body  { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.ds-cert-meta  { display: flex; justify-content: space-between; font-size: var(--ds-fs-xs); color: var(--ds-n600); }
.ds-cert .btn-primary { width: 100%; text-align: center; }

/* ---- Stat / count card (Front-style "completed · in progress") ----------- */
.ds-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-stat {
  flex: 1; min-width: 120px; border: 1px solid var(--ds-n200); border-radius: var(--ds-r);
  background: var(--ds-n0); padding: 16px 18px;
}
.ds-stat-num { font-size: 1.7rem; font-weight: var(--ds-fw-black); letter-spacing: -1px; color: var(--ds-navy); line-height: 1; }
.ds-stat-label { font-size: var(--ds-fs-xs); color: var(--ds-n600); margin-top: 6px; text-transform: uppercase; letter-spacing: .5px; font-weight: var(--ds-fw-bold); }

/* ===========================================================================
   STYLE-GUIDE PAGE CHROME (design.html only)
   =========================================================================== */
body.ds-page { background: var(--ds-n50); color: var(--ds-n900); margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sg-wrap { max-width: 920px; margin: 0 auto; padding: 0 24px 100px; }
.sg-hero { padding: 48px 0 8px; }
.sg-hero h1 { font-size: var(--ds-fs-display); letter-spacing: -1.5px; margin: 0 0 10px; }
.sg-hero p { font-size: 1.05rem; color: var(--ds-n600); max-width: 64ch; margin: 0; line-height: var(--ds-lh); }
.sg-section { margin-top: var(--ds-8); }
.sg-section > h2 {
  font-size: var(--ds-fs-h2); letter-spacing: -.4px; margin: 0 0 4px;
  padding-bottom: 8px; border-bottom: 2px solid var(--ds-n200);
}
.sg-section > .sg-note { font-size: var(--ds-fs-sm); color: var(--ds-n600); margin: 8px 0 20px; max-width: 70ch; }
.sg-sub { font-size: var(--ds-fs-eyebrow); font-weight: var(--ds-fw-black); letter-spacing: 1px; text-transform: uppercase; color: var(--ds-n500); margin: 24px 0 10px; }
.sg-panel { background: var(--ds-n0); border: 1px solid var(--ds-n200); border-radius: var(--ds-r); padding: 22px; }
.sg-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.sg-grid { display: grid; gap: 12px; }

/* swatches */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.sg-swatch { border: 1px solid var(--ds-n200); border-radius: var(--ds-r-sm); overflow: hidden; background: var(--ds-n0); }
.sg-swatch .chip { height: 56px; }
.sg-swatch .meta { padding: 8px 10px; }
.sg-swatch .nm { font-size: var(--ds-fs-xs); font-weight: var(--ds-fw-bold); }
.sg-swatch .hex { font-size: var(--ds-fs-xs); color: var(--ds-n500); font-variant-numeric: tabular-nums; text-transform: uppercase; }

/* type specimens */
.sg-type-row { display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ds-n200); }
.sg-type-row:last-child { border-bottom: none; }
.sg-type-tag { width: 130px; flex-shrink: 0; font-size: var(--ds-fs-xs); color: var(--ds-n500); font-variant-numeric: tabular-nums; }

/* spacing + radius + elevation demos */
.sg-tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap: 14px; }
.sg-token { border: 1px solid var(--ds-n200); border-radius: var(--ds-r-sm); padding: 14px; background: var(--ds-n0); }
.sg-token .lbl { font-size: var(--ds-fs-xs); color: var(--ds-n500); margin-top: 8px; font-variant-numeric: tabular-nums; }
.sg-space-bar { height: 16px; background: var(--ds-teal); border-radius: 4px; }
.sg-radius-box { height: 48px; background: var(--ds-info-bg); border: 1px solid var(--ds-info); }
.sg-elev-box { height: 48px; background: var(--ds-n0); border-radius: var(--ds-r-sm); }

.sg-cols { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 720px) { .sg-cols { grid-template-columns: 1fr; } }

/* ===========================================================================
   CALL-COACHING SCORECARD (prototype) — built on the design tokens.
   A manager rates a recorded call against the WareSpace rubric (1–5),
   leaves a note per criterion, and the low scores roll up as coaching focus.
   =========================================================================== */
.sc-context {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--ds-n0); border: 1px solid var(--ds-n200); border-radius: var(--ds-r-lg);
  padding: 18px 22px; box-shadow: var(--ds-e1);
}
.sc-context .meta { display: flex; align-items: center; gap: 14px; }
.sc-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-navy), var(--ds-teal)); color: #fff; font-weight: var(--ds-fw-bold); }
.sc-who { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-h3); }
.sc-sub { font-size: var(--ds-fs-xs); color: var(--ds-n600); margin-top: 2px; }
.sc-score { text-align: center; }
.sc-score-num { font-size: 2.2rem; font-weight: var(--ds-fw-black); letter-spacing: -1px; line-height: 1; color: var(--ds-navy); }
.sc-score-num.lo { color: var(--ds-danger); } .sc-score-num.mid { color: var(--ds-warning); } .sc-score-num.hi { color: var(--ds-success); }
.sc-score-lbl { font-size: var(--ds-fs-eyebrow); font-weight: var(--ds-fw-black); letter-spacing: .6px; text-transform: uppercase; color: var(--ds-n500); margin-top: 4px; }

.sc-crit { background: var(--ds-n0); border: 1px solid var(--ds-n200); border-radius: var(--ds-r);
  padding: 16px 18px; margin-bottom: 12px; transition: border-color .2s, box-shadow .2s; }
.sc-crit.flagged { border-color: var(--ds-danger); box-shadow: 0 0 0 3px var(--ds-danger-bg); }
.sc-crit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sc-crit-name { font-weight: var(--ds-fw-bold); font-size: var(--ds-fs-body); }
.sc-crit-desc { font-size: var(--ds-fs-xs); color: var(--ds-n600); margin-top: 3px; max-width: 56ch; }
.sc-crit-feeds { font-size: var(--ds-fs-eyebrow); color: var(--ds-n500); font-weight: var(--ds-fw-bold); letter-spacing: .4px; text-transform: uppercase; margin-top: 6px; }

.sc-rate { display: flex; gap: 6px; flex-shrink: 0; }
.sc-chip {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--ds-n300);
  background: var(--ds-n0); color: var(--ds-n600); font: inherit; font-weight: var(--ds-fw-bold);
  cursor: pointer; transition: transform .1s, border-color .15s, background .15s, color .15s;
}
.sc-chip:hover { transform: translateY(-1px); border-color: var(--ds-navy); }
.sc-chip.sel { color: #fff; border-color: transparent; }
.sc-chip.sel.s1, .sc-chip.sel.s2 { background: var(--ds-danger); }
.sc-chip.sel.s3 { background: var(--ds-warning); }
.sc-chip.sel.s4, .sc-chip.sel.s5 { background: var(--ds-success); }

.sc-note { width: 100%; min-height: 0; height: 38px; margin-top: 12px; border: 1px solid var(--ds-n200);
  background: var(--ds-n50); border-radius: 10px; padding: 9px 12px; font: inherit; font-size: var(--ds-fs-sm);
  color: var(--ds-n900); resize: vertical; transition: height .15s, background .15s; }
.sc-note:focus { outline: 2px solid var(--ds-teal); outline-offset: -1px; background: #fff; height: 74px; }

.sc-coaching { background: var(--ds-warning-bg); border: 1px solid #f0dcb3; border-radius: var(--ds-r);
  padding: 16px 18px; margin-top: 4px; }
.sc-coaching h3 { margin: 0 0 8px; font-size: var(--ds-fs-h3); color: var(--ds-warning); }
.sc-coaching ul { margin: 0; padding-left: 18px; }
.sc-coaching li { font-size: var(--ds-fs-sm); margin: 5px 0; color: var(--ds-n800); }
.sc-coaching .none { font-size: var(--ds-fs-sm); color: var(--ds-success); font-weight: var(--ds-fw-med); }

.sc-actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.sc-saved { font-size: var(--ds-fs-sm); color: var(--ds-success); font-weight: var(--ds-fw-bold); opacity: 0; transition: opacity .2s; }
.sc-saved.show { opacity: 1; }