/* Empathos design tokens  v1.1  (2026-10-22)
   Main scheme from the logo PMS sheet: navy #151965 · blue #1C75BC · orange #FF9B00.
   Every accent below is derived from those three (tints, deep shades, a text-safe orange).
   Every pairing was measured against WCAG 2.1 AA.
   Layer 1: tokens.  Layer 2: aliases for the existing cmv-* variables.  Layer 3: overrides
   for rules that hardcode the old sage/cream/gold palette. */

/* ---------- Layer 1: tokens ---------- */
:root {
  --ep-navy:        #151965;  /* primary: headings, primary buttons, sidebar. 15.45:1 on white */
  --ep-navy-deep:   #0E1248;  /* hover/pressed for navy */
  --ep-blue:        #1C75BC;  /* links, secondary buttons, focus ring, progress. 4.86:1 on white */
  --ep-blue-deep:   #1A66A6;  /* hover for blue; white text 6.01:1 */
  --ep-orange:      #FF9B00;  /* FILLS ONLY: active states, completion, pills with navy text (7.32:1) */
  --ep-orange-text: #B85C00;  /* the only orange allowed as text on white. 4.60:1 */

  --ep-ink:         #1B1F3A;  /* body text, navy-biased */
  --ep-muted:       #5B6475;  /* secondary text. 5.96:1 on white */
  --ep-page:        #F4F7FB;  /* page background */
  --ep-surface:     #FFFFFF;  /* cards, inputs */
  --ep-border:      #C9D3E0;  /* decorative hairlines only */
  --ep-control:     #6F8099;  /* input/control borders, ~4:1 (non-text needs 3:1) */

  --ep-navy-tint:   #E9EAF4;  /* selected answer, nav hover */
  --ep-blue-tint:   #E8F1FA;  /* info, progress track */
  --ep-orange-tint: #FFF4E0;  /* "new" / attention surfaces, navy text on top */

  --ep-success:     #1F7A4D;  /* 5.32:1 */
  --ep-warning:     #B85C00;
  --ep-danger:      #B42318;  /* 6.57:1 */
  --ep-danger-tint: #FDECEA;

  --ep-font-display: "Montserrat", "Inter", system-ui, sans-serif;
  --ep-font-body:    "Source Sans 3", "Inter", system-ui, sans-serif;
  --ep-radius: 10px;
  --ep-shadow: 0 1px 2px rgba(21,25,101,.06), 0 4px 16px rgba(21,25,101,.06);
}

/* ---------- Layer 2: aliases (html:root outranks the templates' own :root blocks) ---------- */
html:root {
  --primary: var(--ep-navy);        --primary-dk: var(--ep-navy-deep);
  --accent: var(--ep-orange-text);  --gold: var(--ep-orange);
  --bg: var(--ep-page);             --card: var(--ep-surface);
  --border: var(--ep-border);       --text: var(--ep-ink);   --ink: var(--ep-ink);
  --muted: var(--ep-muted);         --danger: var(--ep-danger);
  --blue: var(--ep-blue);           --blue-d: var(--ep-blue-deep);  --line: var(--ep-control);
}

/* Per-assessment palettes in assessment-page.php (slate: anger-styles, attachment-insight,
   core-beliefs, inner-critic; stop: assertiveness) keep their rules but draw every colour
   from the brand. html body.* outranks the template's body.* blocks. */
html body.cmv-slate-palette {
  --sl-primary-deep: var(--ep-navy-deep); --sl-primary: var(--ep-navy); --sl-primary-soft: var(--ep-blue);
  --sl-accent: var(--ep-orange-text);     --sl-accent-soft: var(--ep-orange-tint);
  --sl-warm-sand: var(--ep-page);         --sl-warm-paper: var(--ep-surface); --sl-muted-surface: var(--ep-navy-tint);
  --sl-ink: var(--ep-ink);                --sl-body: var(--ep-ink);           --sl-muted: var(--ep-muted);
  --sl-border: var(--ep-control);         --sl-light-border: var(--ep-border); --sl-selected: var(--ep-navy-tint);
}
html body.cmv-stop-palette {
  --cmv-coral: var(--ep-navy);     --cmv-coral-dark: var(--ep-navy-deep); --cmv-coral-deep: var(--ep-navy-deep);
  --cmv-sky: var(--ep-blue-tint);  --cmv-sky-dark: var(--ep-blue);        --cmv-yellow: var(--ep-orange);
  --cmv-forest: var(--ep-navy);    --cmv-orange: var(--ep-orange-text);
  --cmv-page: var(--ep-page);      --cmv-surface: var(--ep-surface);
  --cmv-text: var(--ep-ink);       --cmv-text-secondary: var(--ep-ink);   --cmv-text-muted: var(--ep-muted);
  --cmv-border: var(--ep-border);  --cmv-control-border: var(--ep-control);
  --cmv-selected: var(--ep-navy-tint); --cmv-hover: var(--ep-blue-tint);
}

/* ---------- Focus: visible everywhere, blue on light surfaces, orange on navy ---------- */
html .toggle:focus-visible, html .go:focus-visible, html .foot a:focus-visible { outline: 3px solid var(--ep-blue); outline-offset: 2px; }
html :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ep-blue);
  outline-offset: 2px;
}
html .ep-on-navy :where(a, button, input, [tabindex]):focus-visible { outline-color: var(--ep-orange); }

.ep-visually-hidden,
html .cmv-option input {                       /* was display:none — now focusable but invisible */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; display: block;
}
html .cmv-option { position: relative; }
html .cmv-option:focus-within { outline: 3px solid var(--ep-blue); outline-offset: 2px; }

/* ---------- Layer 3: overrides for hardcoded sage / cream / gold ---------- */
/* Assessment pages */
html body { background: var(--ep-page); color: var(--ep-ink); }
html .cmv-header { background: var(--ep-surface); border-bottom-color: var(--ep-border); }
html .cmv-header h1 { color: var(--ep-navy); }
html .cmv-assessment-title, html .cmv-insight-heading, html .cmv-feedback-section h3 { color: var(--ep-navy); }
html .cmv-assessment-desc, html .cmv-question-number, html .cmv-subscale-desc { color: var(--ep-muted); }
html .cmv-instructions, html .cmv-question, html .cmv-client-info, html .cmv-insight { border-color: var(--ep-border); }
html .cmv-question.answered { border-color: var(--ep-blue); }
html .cmv-progress { background: var(--ep-blue-tint); }
html .cmv-progress-bar { background: var(--ep-blue); }
html .cmv-option { border-color: var(--ep-control); }
html .cmv-option:hover { background: var(--ep-blue-tint); border-color: var(--ep-blue); }
html .cmv-option.selected, html .cmv-option:has(input:checked) { background: var(--ep-navy-tint); border-color: var(--ep-navy); }
html .cmv-option-dot { border-color: var(--ep-control); }
html .cmv-option.selected .cmv-option-dot, html .cmv-option:has(input:checked) .cmv-option-dot { border-color: var(--ep-navy); background: var(--ep-navy); }
html .cmv-text-input, html .cmv-client-info input { border-color: var(--ep-control); }
html .cmv-text-input:focus, html .cmv-client-info input:focus { border-color: var(--ep-blue); }
html .cmv-submit-btn, html .cmv-tos-page-button { background: var(--ep-navy); color: #fff; }
html .cmv-submit-btn:hover, html .cmv-tos-page-button:hover { background: var(--ep-navy-deep); }
html .cmv-submit-btn:disabled { background: var(--ep-border); color: var(--ep-muted); }
html .cmv-subscale-bar, html .cmv-score-bar-fill, html .mmpi-bar-fill { background: var(--ep-blue); }
html .cmv-feedback-section summary, html .cmv-insight-block a, html .cmv-feedback-section a { color: var(--ep-blue); }
html .cmv-guidance { background: var(--ep-orange-tint); border-color: var(--ep-orange); color: var(--ep-ink); }

/* Tools & Assessments directory */
html .cmv-category-header { border-bottom-color: var(--ep-border); }
html .cmv-category-title { color: var(--ep-navy); font-family: var(--ep-font-display); }
html .cmv-category-desc, html .cmv-card-desc { color: var(--ep-muted); }
html .cmv-card-meta { color: var(--ep-muted); font-size: 13px; }
html .cmv-card { border-color: var(--ep-border); }
html .cmv-card:hover { border-color: var(--ep-blue); box-shadow: var(--ep-shadow); }
html .cmv-card-title { color: var(--ep-navy); }
html .cmv-card-badge { background: var(--ep-orange-tint); color: var(--ep-navy); border: 1px solid var(--ep-orange); font-size: 12px; }
html .cmv-card-btn-primary { background: var(--ep-navy); color: #fff; }
html .cmv-card-btn-primary:hover { background: var(--ep-navy-deep); color: #fff; }
html .cmv-card-btn-secondary { background: var(--ep-surface); color: var(--ep-blue); border: 2px solid var(--ep-blue); }
html .cmv-card-btn-secondary:hover { background: var(--ep-blue-tint); color: var(--ep-blue-deep); }
html .cmv-category-dot { background: var(--ep-blue) !important; }

/* Clinician dashboard: pin card, header, sidebar-style accents */
html .pin-card h1, html .dash-header .brand { color: var(--ep-navy); }
html .pin-card input[type="password"]:focus, html .client-search:focus { border-color: var(--ep-blue); }
html .pin-card button { background: var(--ep-navy); }
html .pin-card button:hover { background: var(--ep-navy-deep); }
html .btn-logout:hover { border-color: var(--ep-blue); color: var(--ep-blue); }

/* Site gate */
html .go { background: var(--ep-navy); }
html .go:hover { background: var(--ep-navy-deep); }
html .toggle, html .foot a { color: var(--ep-blue); }
html input#code { border-color: var(--ep-control); }
html input#code:focus { border-color: var(--ep-blue); box-shadow: 0 0 0 3px rgba(28,117,188,.25); }