/* ============================================================
   AI Beginner — members/course design tokens.
   Re-themes the ported course.css + learning-path.css to the
   main site's identity: deep purple ground, teal "capability"
   accent, soft violet secondary. Token NAMES match the original
   ARF system so the ported stylesheets and inline var() refs
   render on-brand without per-rule edits.
   ============================================================ */

:root {
  /* Ground + surfaces (deep purple, matching the Story theme) */
  --ink:        #2a1f43;
  --ink-2:      #33285a;
  --ink-3:      #3d3168;
  --paper:      #f5f2fb;
  --paper-dim:  rgba(245, 242, 251, 0.76);
  --paper-muted:rgba(245, 242, 251, 0.50);

  /* Teal capability accent (the site's CTA colour) */
  --capability: #2EC4B6;
  --capability-bright: #46d3c6;
  --capability-glow:   rgba(46, 196, 182, 0.16);
  --technology: #b78fd6;
  --line:       rgba(255, 255, 255, 0.14);
  --line-capability: rgba(46, 196, 182, 0.34);
  --teal:       #2EC4B6;

  /* Legacy aliases — ported page styles reference these names */
  --navy:        var(--ink);
  --navy-mid:    var(--ink-2);
  --navy-light:  var(--ink-3);
  --amber:       var(--capability);
  --amber-light: var(--capability-bright);
  --amber-glow:  var(--capability-glow);
  --teal-dim:    rgba(46, 196, 182, 0.15);
  --white:       var(--paper);
  --white-dim:   var(--paper-dim);
  --white-muted: var(--paper-muted);
  --border:      var(--line);
  --border-amber:var(--line-capability);

  /* Type — match the main site */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Emphasis accent — the signature treatment for key words */
.serif-accent,
h1 em, h2 em, .section-heading em, .hero h1 em {
  font-style: normal;
  font-weight: 700;
  color: var(--capability);
}

h1, h2, h3, .section-heading, .hero h1 { letter-spacing: -0.01em; }

/* Text wordmark */
.wordmark-text {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark-text .wm-accent { color: var(--capability); }

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--capability);
  outline-offset: 3px;
}