/* /course/css/course-tokens.css — v2.0 AAS — 2026-08-06
   Advanced Ai Solutions single-palette token set (--aas-*), per
   _build/aas_style_bible.md. Every legacy --tz-* NAME is kept working
   as an alias into the --aas-* set. Reference NEW work via var(--aas-*). */

:root {
  /* === AAS canonical palette (Style Bible v1.0) — THE only palette === */
  /* LIGHT app chrome (founder directive 2026-08-06 — light homepage look) */
  --aas-bg:             #F4F6F9;
  --aas-card:           #FFFFFF;
  --aas-card-2:         #EDF1F7;
  --aas-text:           #111827;
  --aas-muted:          #42526B;
  --aas-border:         #D9DFE8;
  /* Brand */
  --aas-navy:           #0A2240;
  --aas-navy-2:         #0E2C52;
  --aas-ink:            #111827;
  --aas-slate:          #42526B;
  --aas-mist:           #F4F6F9;
  --aas-paper:          #FFFFFF;
  --aas-accent:         #2E6FD8;
  --aas-accent-hover:   #1F56AE;
  --aas-gold:           #C9A227;
  /* Readable gold for TEXT on light surfaces — #C9A227 is only ~2.6:1 on white.
     Use --aas-gold for fills/borders, --aas-gold-ink for gold-toned type. */
  --aas-gold-ink:       #7A5F0F;
  --aas-line:           #D9DFE8;
  /* Semantic */
  --aas-success:        #1F9D66;
  --aas-warn:           #C9852B;
  --aas-error:          #C0392B;
  /* Fonts */
  --aas-font-heading:   'Inter', 'Montserrat', sans-serif;
  --aas-font-body:      'Inter', 'Open Sans', system-ui, sans-serif;
  --aas-font-mono:      'JetBrains Mono', 'Courier New', monospace;

  /* === Module accent ramp (dashboard cards) ===============================
     One token per module SLOT. dashboard.php derives the token name from the
     module number — `var(--aas-mod-accent-N, var(--aas-mod-accent-fallback))` —
     so adding a 9th module means adding a 9th token HERE and bumping the cycle
     length in dashboard.php; no PHP colour literals anywhere.
     Slots 1-4 = BASIC track, slots 5-8 = ADVANCED track (V3 structure).
     These are FILL/BORDER/NUMERAL colours (progress fill, card hover border,
     the big 01..08 numeral over a dark scrim) — not body text. */
  --aas-mod-accent-fallback: var(--aas-accent);
  --aas-mod-accent-1:   var(--aas-accent);        /* basic 1  — AAS blue      */
  --aas-mod-accent-2:   var(--aas-success);       /* basic 2  — green         */
  --aas-mod-accent-3:   var(--aas-warn);          /* basic 3  — amber         */
  --aas-mod-accent-4:   #7A4FCF;                  /* basic 4  — violet        */
  --aas-mod-accent-5:   var(--aas-accent-hover);  /* adv   5  — deep blue     */
  --aas-mod-accent-6:   #0E8A8F;                  /* adv   6  — teal          */
  --aas-mod-accent-7:   #B85C1F;                  /* adv   7  — burnt orange  */
  --aas-mod-accent-8:   var(--aas-navy);          /* adv   8  — navy          */

  /* === Legacy --tz-* aliases — names kept, values re-pointed at --aas-* === */
  --tz-brand-teal:      var(--aas-accent);
  --tz-brand-gold:      var(--aas-gold);
  --tz-brand-coral:     var(--aas-accent);
  --tz-brand-magenta:   var(--aas-accent);
  --tz-brand-navy:      var(--aas-navy);
  --tz-brand-navy-2:    var(--aas-navy-2);
  --tz-brand-ink:       var(--aas-text);
  --tz-brand-mute:      var(--aas-muted);

  /* Semantic tokens — used in slides */
  --tz-success:         var(--aas-success);
  --tz-success-ink:     #FFFFFF;
  --tz-success-soft:    var(--aas-success);

  --tz-warning:         var(--aas-gold);
  --tz-warning-ink:     #2A1D04;
  --tz-warning-soft:    var(--aas-warn);

  --tz-caution:         var(--aas-error);
  --tz-caution-ink:     #FFFFFF;

  --tz-destructive:     var(--aas-error);
  --tz-destructive-ink: #FFFFFF;

  --tz-cta-primary:     var(--aas-accent);
  --tz-cta-primary-ink: #FFFFFF;
  --tz-cta-hover:       var(--aas-accent-hover);

  --tz-info:            var(--aas-accent);
  --tz-info-ink:        #FFFFFF;

  --tz-hero:            var(--aas-gold);
  --tz-hero-soft:       var(--aas-gold);

  --tz-currency:        var(--aas-gold);

  /* === Standard gradients === */
  --tz-grad-headline:   linear-gradient(90deg, var(--aas-navy) 0%, var(--aas-accent) 60%, var(--aas-accent-hover) 100%);
  --tz-grad-cta:        linear-gradient(135deg, var(--aas-accent), var(--aas-accent-hover));
  --tz-grad-success:    linear-gradient(135deg, var(--aas-success), var(--aas-accent));
  --tz-grad-warning:    linear-gradient(135deg, var(--aas-warn), var(--aas-gold));

  /* === Surfaces === */
  --tz-bg:              var(--aas-bg);
  --tz-bg-2:            var(--aas-card-2);
  --tz-stroke:          var(--aas-border);
  --tz-stroke-2:        rgba(10, 34, 64, 0.16);
}

/* Tier-cue aside — shared across every retrofitted slide */
aside.tz-tier-cue {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(46,111,216,0.10), rgba(46,111,216,0.06));
  border-left: 3px solid var(--tz-info);
  border-radius: 8px;
  color: var(--tz-brand-ink);
  font-size: 0.95rem;
  line-height: 1.55;
}
aside.tz-tier-cue [data-tier][hidden] { display: none; }
aside.tz-tier-cue [data-tier] { animation: tzTierFade .25s ease; }
@keyframes tzTierFade { from { opacity:.0; transform: translateY(-2px); } to { opacity:1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  aside.tz-tier-cue [data-tier] { animation: none; }
}

/* Mobile tap-target floor for engine-injected slide widget buttons. */
@media (max-width: 480px) {
  .slide-widget-save,
  .slide-widget-action,
  .retrieval-mc-opt,
  .retrieval-reveal,
  .sandbox-seg-btn,
  .sandbox-copy,
  .sandbox-expand {
    min-height: 44px;
    padding: 12px 18px;
    font-size: 14px;
  }
}

/* Mobile tap-target floor for shared chrome (header/footer/slide nav).
   Mobile-only — desktop unaffected. */
@media (max-width: 480px) {
  .tq-readlevel-pill,
  .tq-readlevel-toggle,
  .pres-arrow,
  .pres-drawer-close,
  .notif-mark-all,
  .tt-help-btn,
  .kiosk-exit-btn,
  .nav-logout,
  .skip-link {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  .pres-arrow {
    padding: 12px;
  }
}