/* ============================================================
   Future-Ready Assessment -- COLOR THEME (XYMOGEN Xperience)
   Duplicate this file (e.g. theme-alt.css) and swap the <link>
   in the .dc.html to re-skin the whole assessment.
   Only colors live here. Layout/type live in assessment.css.
   ============================================================ */

/* ---------- Self-hosted fonts ---------- */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/instrument-sans-400.ttf') format('truetype')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/instrument-sans-500.ttf') format('truetype')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/instrument-sans-600.ttf') format('truetype')}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/instrument-sans-700.ttf') format('truetype')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400.ttf') format('truetype')}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/spectral-400i.ttf') format('truetype')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spectral-500.ttf') format('truetype')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600.ttf') format('truetype')}
:root{
  /* Canvas & surfaces */
  --page-bg:      #e9edf2;   /* cool soft canvas behind the card */
  --surface:      #ffffff;   /* card / panels */
  --surface-2:    #fbfcfd;   /* inner off-white (option cards, fields) */

  /* Ink */
  --ink:          #1e2732;   /* primary text */
  --ink-soft:     #566372;   /* secondary text */
  --ink-faint:    #8a95a2;   /* labels, meta, placeholders */

  /* Lines */
  --hairline:     #e2e8ef;   /* borders / dividers */

  /* XYMOGEN blue */
  --brand:          #12B3D8;   /* XYMOGEN blue -- header, buttons, progress fill, accents */
  --brand-strong:   #12B3D8;   /* header + buttons */
  --brand-deep:     #0e97b8;   /* hover / pressed */
  --brand-tint:     #d7edf8;   /* pale light blue -- top band */
  --brand-tint-2:   #eaf6fc;   /* very light blue -- selected option bg */
  --on-brand:       #ffffff;   /* text on blue */

  /* Progress track = gold (unfinished portion) */
  --progress-track: #FFB63F;

  /* Gold accent (Optimal DX / Optive lineage) */
  --gold:         #FFB63F;
  --gold-soft:    #ffe0a6;
  --gold-line:    #ffca6e;
  --on-gold:      #4a3812;

  /* Focus ring */
  --focus:        rgba(18,179,216,.35);
}