/* =====================================================================
   mental-picture-sa-bridge.css — Scholar's Ascent token bridge
   ---------------------------------------------------------------------
   mental-picture.css was written against the source site's architecture
   tokens (--ah-*, --ink, --font-display, --c-* course hues). This file
   defines those tokens in Scholar's Ascent terms (emerald / gold / cream,
   Playfair Display / Inter) so the copied stylesheet renders on-brand.
   Load AFTER mental-picture.css: the text-color overrides at the bottom
   rely on source order to win at equal specificity.
   ===================================================================== */

:root {
  /* Ink + structure (light surfaces — SA is a light-first site) */
  --ink: var(--tsa-charcoal, #1E1E2E);
  --ink-2: var(--tsa-gray, #4B5563);
  --line: rgba(30, 30, 46, 0.12);
  --line-strong: rgba(30, 30, 46, 0.26);
  --recessed: var(--tsa-light, #F8F7F4);
  --accent-bright: var(--tsa-emerald-dark, #095C4B); /* "bright" = stronger in daylight */
  --accent-tint: rgba(13, 124, 102, 0.10);

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-ui: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Architecture scale (radii / motion / type sizes) */
  --ah-r-1: 6px;
  --ah-r-2: 10px;
  --ah-r-3: 14px;
  --ah-r-4: 20px;
  --ah-r-pill: 999px;
  --ah-elev-1: 0 1px 2px rgba(30,30,46,0.05), 0 2px 8px rgba(30,30,46,0.05);
  --ah-elev-2: 0 6px 20px rgba(30,30,46,0.08), 0 0 0 1px rgba(30,30,46,0.03);
  --ah-elev-3: 0 12px 40px rgba(30,30,46,0.12);
  --ah-dur-1:  80ms;
  --ah-dur-2: 160ms;
  --ah-dur-3: 240ms;
  --ah-dur-4: 380ms;
  --ah-dur-5: 600ms;
  --ah-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ah-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ah-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ah-fs-1: 0.72rem;
  --ah-fs-2: 0.82rem;
  --ah-fs-3: 0.95rem;
  --ah-fs-4: 1.1rem;
  --ah-fs-5: 1.35rem;
  --ah-fs-6: 1.75rem;
  --ah-fs-7: 2.4rem;
  --ah-fs-8: clamp(2.5rem, 6vw, 3.8rem);
  --ah-lh-tight: 1.2;
  --ah-lh-body:  1.55;
  --ah-ls-display: 0.04em;
  --ah-ls-label:   0.12em;

  /* Course / subject hues — SA jewel tones, no violet or indigo.
     Referenced by MentalPictureContent (COURSES + SUBJECTS `hue` fields). */
  --c-alg1:    #0D7C66;  /* Algebra I    — SA emerald (default track)   */
  --c-geo:     #1D4AB2;  /* Geometry     — sapphire                     */
  --c-alg2:    #B88418;  /* Algebra II   — SA gold (was radiant violet) */
  --c-sci:     #7A5A0F;  /* Science      — bronze amber                 */
  --c-precalc: #0B6E80;  /* Pre-Calculus — deep cyan                    */
  --c-calc:    #B02257;  /* Calculus     — garnet                       */
  --c-phys:    #2456C6;  /* Physics      — cobalt (was deep indigo)     */
  --c-apphys:  #4B5563;  /* AP Physics   — scholar slate                */
}

/* Per-course accent theming (applyAccent() toggles these classes on #mps) */
.course-alg1    { --accent: var(--c-alg1);    --accent-bright: color-mix(in srgb, var(--c-alg1) 78%, black);    --accent-tint: color-mix(in srgb, var(--c-alg1) 12%, transparent); }
.course-geo     { --accent: var(--c-geo);     --accent-bright: color-mix(in srgb, var(--c-geo) 78%, black);     --accent-tint: color-mix(in srgb, var(--c-geo) 12%, transparent); }
.course-alg2    { --accent: var(--c-alg2);    --accent-bright: color-mix(in srgb, var(--c-alg2) 78%, black);    --accent-tint: color-mix(in srgb, var(--c-alg2) 12%, transparent); }
.course-precalc { --accent: var(--c-precalc); --accent-bright: color-mix(in srgb, var(--c-precalc) 78%, black); --accent-tint: color-mix(in srgb, var(--c-precalc) 12%, transparent); }
.course-calc    { --accent: var(--c-calc);    --accent-bright: color-mix(in srgb, var(--c-calc) 78%, black);    --accent-tint: color-mix(in srgb, var(--c-calc) 12%, transparent); }
.course-phys    { --accent: var(--c-phys);    --accent-bright: color-mix(in srgb, var(--c-phys) 78%, black);    --accent-tint: color-mix(in srgb, var(--c-phys) 12%, transparent); }
.course-apphys  { --accent: var(--c-apphys);  --accent-bright: color-mix(in srgb, var(--c-apphys) 78%, black);  --accent-tint: color-mix(in srgb, var(--c-apphys) 12%, transparent); }

/* Accent-filled controls: white text on SA jewel tones (the source site used
   dark-navy text on a pale violet; every SA hue above is dark enough for #fff). */
#mps .mps-btn,
#mps .mps-hero-cta,
#mps .mps-hinge-tag,
#mps .mps-stepcard[data-hinge="true"] .mps-stepcard-n,
.mp-embed-cta,
.mp-coach-cta { color: #fff; }
#mps .mps-btn--ghost { color: var(--ink); }