/* Career Passport shared visual system: 20260903-color-system1 */
:root{
  /* Brand foundation — shared by every learner-facing product. */
  --cp-navy:#1E3A5F;
  --cp-navy-soft:#2E4D74;
  --cp-navy-deep:#16324F;
  --cp-orange:#E08A3C;
  --cp-orange-deep:#C9742A;
  --cp-green:#3C8A6B;
  --cp-blue:#4E7DA8;
  --cp-teal:#277C78;
  --cp-purple:#7964A8;
  --cp-red:#B85C55;
  --cp-slate:#617486;

  --cp-bg:#F4F1E8;
  --cp-bg-deep:#E9E4D8;
  --cp-surface:#FFFFFF;
  --cp-surface-soft:#FBFAF6;
  --cp-line:#E3DDCF;
  --cp-text:#292A2D;
  --cp-muted:#68645D;

  --cp-soft-orange:#FFF4E7;
  --cp-soft-green:#EAF5EF;
  --cp-soft-blue:#EEF3F8;
  --cp-soft-teal:#EAF4F2;
  --cp-soft-purple:#F1EDF8;
  --cp-soft-red:#FFF0EE;

  /* Compatibility aliases used by the existing screens. */
  --navy:var(--cp-navy);
  --navy-2:var(--cp-navy-soft);
  --navy2:var(--cp-navy-soft);
  --navy-soft:var(--cp-navy-soft);
  --orange:var(--cp-orange);
  --orange2:var(--cp-orange-deep);
  --orange-deep:var(--cp-orange-deep);
  --green:var(--cp-green);
  --blue:var(--cp-blue);
  --teal:var(--cp-teal);
  --purple:var(--cp-purple);
  --red:var(--cp-red);
  --danger:var(--cp-red);
  --slate:var(--cp-slate);
  --bg:var(--cp-bg);
  --beige:var(--cp-bg);
  --cream:var(--cp-bg);
  --paper:var(--cp-surface);
  --white:var(--cp-surface);
  --card:var(--cp-surface);
  --panel:var(--cp-surface-soft);
  --beige-card:var(--cp-surface-soft);
  --line:var(--cp-line);
  --ink:var(--cp-text);
  --muted:var(--cp-muted);
  --gray:var(--cp-muted);
  --soft-orange:var(--cp-soft-orange);
  --orange-soft:var(--cp-soft-orange);
  --orange-bg:var(--cp-soft-orange);
  --soft-green:var(--cp-soft-green);
  --green-bg:var(--cp-soft-green);
  --soft-blue:var(--cp-soft-blue);
  --pale:var(--cp-soft-blue);
  --soft-purple:var(--cp-soft-purple);
}

/* A common, visible keyboard focus state across diagnosis and learning flows. */
.cp-readable :is(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(224,138,60,.34);
  outline-offset:2px;
}

/* Neutral application canvas. Product identity belongs to cards and accents. */
body.cp-area-portal,
body.cp-area-learning,
body.cp-area-interview-entry{
  color:var(--cp-text);
}

body.cp-area-interview-entry{
  background:
    radial-gradient(circle at 96% 2%,rgba(224,138,60,.14),transparent 22rem),
    linear-gradient(180deg,#FBF8F1 0,var(--cp-bg) 100%);
}

/* Interview is identified by navy + orange; green remains success/readiness. */
.cp-area-interview-entry .entry-hero{
  background:linear-gradient(128deg,var(--cp-navy-deep) 0 62%,var(--cp-navy-soft) 100%);
}
.cp-area-job-interview .app,
.cp-area-job-interview .mock-app{
  background:var(--cp-bg);
}
.cp-area-job-interview .ai-interview-topbar,
.cp-area-job-interview .mock-topbar{
  background:rgba(244,241,232,.95);
}

/* Study interview keeps blue as a route accent on the same neutral canvas. */
body.cp-area-study-interview{
  background:linear-gradient(180deg,#F8FAFC 0,var(--cp-soft-blue) 100%);
}
.cp-area-study-interview .study-app{
  background:#FAFCFD;
}
.cp-area-study-interview .setup-hero,
.cp-area-study-interview .feedback-hero,
.cp-area-study-interview .report-score{
  background:linear-gradient(135deg,var(--cp-navy),var(--cp-blue));
}
.cp-area-study-interview .start-button,
.cp-area-study-interview .submit-answer,
.cp-area-study-interview .next-button,
.cp-area-study-interview .study-primary-action{
  background:linear-gradient(135deg,var(--cp-navy),var(--cp-blue));
}

/* Stable meanings shared across every screen. */
.cp-status-free{color:var(--cp-green);background:var(--cp-soft-green)}
.cp-status-pass{color:var(--cp-orange-deep);background:var(--cp-soft-orange)}
.cp-status-locked{color:#81786D;background:#EEEAE2}