/* ─────────────────────────────────────────────────────────────
   XpertiseNow Executive Learning — Design Tokens
   Direction: Hybrid Scholarly
   Source: Journey to AI Fluency — UI Directions v3 (selected)
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Color: surfaces ────────────────────────────────────── */
  --bg:           #f4f1eb;   /* page background — warm ivory */
  --panel:        #ffffff;   /* cards, primary surfaces */
  --card:         #fbf8f1;   /* secondary surfaces, subtle blocks */

  /* ── Color: ink (text) ──────────────────────────────────── */
  --ink:          #13202e;   /* primary text — deep navy */
  --ink-2:        #2a3a4d;   /* secondary text */
  --muted:        #6b7585;   /* tertiary text, captions */
  --faint:        #a8aeb8;   /* disabled, locked, very subtle */

  /* ── Color: lines ───────────────────────────────────────── */
  --line:         #e1d9c9;   /* default border */
  --line-soft:    #ece5d4;   /* inner dividers */

  /* ── Color: accent (the single accent — restrained ochre) ─ */
  --accent:       #b8893e;   /* gold/ochre — eyebrows, highlights */
  --accent-soft:  #f6ecd6;   /* accent backgrounds */

  /* ── Color: navy (used as a deep surface) ───────────────── */
  --navy:         #13202e;   /* deep navy — same as ink */
  --navy-soft:    #e3e7ec;   /* pale navy chip backgrounds */

  /* ── Color: callout / functional tints ──────────────────── */
  --note-bg:      #fdf6e8;   /* "Note for executives" callout */

  /* ── Typography ─────────────────────────────────────────── */
  --serif:    "DM Serif Display", "Source Serif 4", Georgia, serif;
  --sans:     "DM Sans", "Inter", system-ui, sans-serif;
  --mono:     "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — display + body */
  --t-display-1:  56px;   /* hero / course title */
  --t-display-2:  44px;   /* lesson title */
  --t-h1:         32px;   /* page-level title */
  --t-h2:         28px;   /* section heading (serif) */
  --t-h3:         22px;   /* card heading (serif) */
  --t-h4:         20px;   /* unit / list heading */
  --t-lead:       18px;   /* lead paragraph (italic, muted) */
  --t-body:       17px;   /* main reading body */
  --t-body-sm:    14px;   /* UI body */
  --t-meta:       13px;   /* meta / supporting */
  --t-caption:    12px;   /* captions */
  --t-eyebrow:    11px;   /* uppercase eyebrow */
  --t-micro:      10px;   /* table headers, ultra-small labels */

  /* Line heights */
  --lh-tight:     1.05;   /* display headlines */
  --lh-snug:      1.2;
  --lh-normal:    1.55;   /* default body */
  --lh-loose:     1.75;   /* long-form reading */

  /* Letter spacing */
  --ls-eyebrow:   0.18em; /* eyebrows / chips */
  --ls-eyebrow-sm: 0.14em;
  --ls-display:   -0.02em; /* large serif display */
  --ls-h:         -0.015em;

  /* ── Layout ─────────────────────────────────────────────── */
  --content-narrow: 760px;  /* reading column */
  --content:        1100px; /* default */
  --content-wide:   1240px;

  /* ── Radius ─────────────────────────────────────────────── */
  --r-sm:   4px;    /* tags, mini-chips */
  --r-md:   8px;    /* buttons */
  --r-lg:   10px;   /* small cards */
  --r-xl:   14px;   /* default card */
  --r-2xl:  18px;   /* large card */
  --r-3xl:  22px;   /* hero / feature card */

  /* ── Shadow ─────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(19,32,46,0.04);
  --shadow-md: 0 6px 22px -8px rgba(19,32,46,0.18);

  /* ── Spacing scale ──────────────────────────────────────── */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   48px;
  --s-10:  64px;

  /* ── Block-type accents (Canonical v2 — six block types) ── */
  /* Architectural names (Canonical):  Instruction, Case, Discussion,
     Production, Reflection, Reference.
     Learner-facing label:  Production → "Assessment".
     The chip color tells the learner what kind of block it is. */
  --block-instruction:  #13202e;   /* navy — reading mode */
  --block-case:         #13202e;   /* navy — reading mode */
  --block-discussion:   #b8893e;   /* accent — interactive output */
  --block-assessment:   #b8893e;   /* accent — interactive output (canonical: production) */
  --block-reflection:   #13202e;   /* navy — reading/writing */
  --block-reference:    #13202e;   /* navy — reading mode */
}

/* ── Document defaults ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-body-sm);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }