/* ============================================================================
   theme-aurora.css — THEME A · "Aurora 晨曦"
   The modern-AI SaaS restyle for the JC SEN Student Portfolio Platform.
   Loads AFTER tokens.css + base.css and overrides only tokens + skin.

   LOOK: near-white ground with a whisper of cool violet tint; one accent
   story — an indigo→violet gradient family with a mint/teal secondary.
   Primary buttons carry a subtle two-stop gradient + soft colored shadow;
   radii are large and soft (12/16/20); shadows are layered feathers with a
   faint violet cast; the topbar gets a slim aurora identity hairline.
   Think Linear / Vercel / Anthropic console — premium AI product, still calm
   enough for a stressed teacher on a tablet.

   GUARANTEES
   - Light mode only in this file; the explicit dark toggle
     (:root[data-theme="dark"]) is untouched and keeps working.
   - WCAG AA (computed, not guessed):
       ink   #232338 on bg    #fafaff → 14.74:1  (≥7 ✓)
       muted #5a5a78 on bg    #fafaff →  6.37:1  (≥4.5 ✓)
       btn-fg #ffffff on primary #5b5bd6 → 5.37:1 (≥4.5 ✓)
         gradient stops #6e55dd / #514dcf → 5.24:1 / 6.34:1 (both ≥4.5 ✓)
       primary-ink #4338b8 on primary-soft #ecebfc → 7.15:1 (≥4.5 ✓)
       faint #62627f on raise #f3f4fc → 5.36:1 (≥4.5 ✓)
   - No layout mechanics touched; touch targets stay ≥44px; nothing hidden.
   - Self-contained: system font stacks only, CJK fallbacks retained.
   ========================================================================== */

:root {
  /* ---- cool near-white ground ---- */
  --bg:       #fafaff;   /* white with a whisper of violet-blue */
  --surface:  #ffffff;
  --raise:    #f3f4fc;   /* cool lifted panels (rail, table heads) */
  --line:     #e7e7f4;   /* cool hairline */

  --ink:      #232338;   /* deep indigo-charcoal text — 14.74:1 on bg */
  --muted:    #5a5a78;   /* secondary text — 6.37:1 on bg */
  --faint:    #62627f;   /* labels / meta — 5.36:1 on raise */

  /* ---- accent: the indigo→violet aurora family ---- */
  --primary:      #5b5bd6;   /* Aurora indigo — 5.37:1 with white */
  --primary-soft: #ecebfc;
  --primary-ink:  #4338b8;   /* 7.15:1 on primary-soft */
  --grad-a:       #6e55dd;   /* violet gradient stop  — 5.24:1 w/ white */
  --grad-b:       #514dcf;   /* indigo gradient stop  — 6.34:1 w/ white */

  /* ---- semantics: mint/teal secondary + warm amber kept gentle ---- */
  --success:       #0f7a63;  /* mint-teal — 5.27:1 with white */
  --success-soft:  #e2f6ef;
  --success-ink:   #0b6250;  /* 6.49:1 on success-soft */
  --attention:     #96631a;  /* warm amber "needs a look" — 5.13:1 w/ white */
  --attention-soft:#f9efdb;
  --attention-ink: #8a5a12;  /* 5.18:1 on attention-soft */
  --danger:        #c03e3e;  /* staff-facing critical only */
  --focus:         #5b5bd6;
  --btn-fg:        #ffffff;

  /* ---- shape & depth: large soft radii, layered feather shadows ---- */
  --r-sm: 12px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px;
  --shadow: 0 1px 2px rgba(35, 35, 80, .04),
            0 4px 12px rgba(70, 60, 180, .05),
            0 12px 32px rgba(70, 60, 180, .06);

  /* ---- type: system stack, CJK first-class (unchanged fallbacks) ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "PingFang TC", "PingFang SC", "Noto Sans TC", "Noto Sans SC",
               "Noto Sans", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

/* ============================================================================
   TOPBAR — the brand moment: clean white bar over a slim aurora hairline.
   ========================================================================== */
.topbar {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
/* the aurora identity hairline — 2px gradient beneath the bar */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, #514dcf, #6e55dd 34%, #8a63e8 58%, #0f9b7d 100%);
  opacity: .85; pointer-events: none;
}
.logo {
  background: linear-gradient(140deg, var(--grad-a), var(--grad-b));
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(91, 91, 214, .35);
}
.topbar .ttl { letter-spacing: -.01em; }
.avatar {
  background: linear-gradient(140deg, #ecebfc, #e2e0fb);
  border: 1px solid #dcdaf6;
}
.envtag { border-style: solid; background: var(--raise); }
.demobar { border-bottom: 1px solid #f0e4c8; }

/* ============================================================================
   RAIL / NAV — quiet cool panel; the active item glows softly in the accent.
   ========================================================================== */
.rail { background: var(--raise); border-right: 1px solid var(--line); }
.rail a { border-radius: var(--r-sm); transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.rail a.on {
  background: linear-gradient(140deg, #edecfd, #e6e4fb);
  box-shadow: inset 2px 0 0 var(--primary);
}
.bottomnav { box-shadow: 0 -4px 16px rgba(35, 35, 80, .06); }

/* ============================================================================
   BUTTONS — two-stop gradient + soft colored shadow; the signature move.
   ========================================================================== */
.btn {
  background: linear-gradient(160deg, var(--grad-a), var(--grad-b));
  border-color: var(--grad-b);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(81, 77, 207, .25), 0 4px 14px rgba(91, 91, 214, .28);
  letter-spacing: .01em;
  transition: transform var(--dur-press) var(--ease-out),
              box-shadow var(--dur-fast) ease, filter var(--dur-fast) ease;
}
@media (hover:hover) and (pointer:fine) {
  .btn:hover { filter: brightness(1.06); box-shadow: 0 2px 4px rgba(81, 77, 207, .28), 0 6px 20px rgba(91, 91, 214, .34); }
}
.btn:active { transform: scale(.97); box-shadow: 0 1px 2px rgba(81, 77, 207, .25); }
.btn.good {
  background: linear-gradient(160deg, #12866d, #0d6e59);
  border-color: #0d6e59;
  box-shadow: 0 1px 2px rgba(15, 122, 99, .22), 0 4px 14px rgba(15, 122, 99, .24);
}
.btn.warn {
  background: linear-gradient(160deg, #a06a1c, #8d5c15);
  border-color: #8d5c15;
  box-shadow: 0 1px 2px rgba(150, 99, 26, .22), 0 4px 14px rgba(150, 99, 26, .24);
}
.btn.ghost {
  background: var(--surface); color: var(--primary-ink); border-color: var(--line);
  box-shadow: 0 1px 2px rgba(35, 35, 80, .05);
}
@media (hover:hover) and (pointer:fine) {
  .btn.ghost:hover { filter: none; border-color: #c9c6f0; background: #fbfbff;
                     box-shadow: 0 2px 8px rgba(91, 91, 214, .12); }
}

/* focus rings glow softly in the accent (outline kept for forced-colors) */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(91, 91, 214, .18);
  border-radius: 8px;
}

/* ============================================================================
   CARDS & PANELS — feather-shadow surfaces, generous radii, quiet borders.
   ========================================================================== */
.card, .step { border-color: var(--line); border-radius: var(--r-md); }
@media (hover:hover) and (pointer:fine) {
  .card.click:hover {
    border-color: #b9b4ef;
    box-shadow: 0 2px 4px rgba(35, 35, 80, .05),
                0 8px 20px rgba(70, 60, 180, .09),
                0 18px 44px rgba(70, 60, 180, .08);
  }
}
.thumb { background: linear-gradient(135deg, #ecebfc, #e2f6ef); color: var(--primary-ink); }

/* stat cards: the left sliver becomes a slim gradient accent top-bar */
.statcard { border-radius: var(--r-md); }
.statcard::before {
  inset: 0 0 auto 0; width: auto; height: 3px;
  background: var(--line);
}
.statcard.accent::before { background: linear-gradient(90deg, var(--grad-b), var(--grad-a), #8a63e8); }
.statcard.good::before   { background: linear-gradient(90deg, #0d6e59, #17a184); }
.statcard.warn::before   { background: linear-gradient(90deg, #8d5c15, #c08a2e); }
.statcard .k { letter-spacing: -.03em; }

/* AI suggestion panel — soft aurora wash instead of a hard blue box */
.ai {
  border: 1px solid #d4d0f5;
  background: linear-gradient(150deg, #f1f0fd, #ecebfc 60%, #e9f3f6);
  border-radius: var(--r-md);
}
.notice { border-radius: var(--r-sm); }

/* ============================================================================
   FORMS & TABLES — crisp fields with a gentle accent glow on focus.
   ========================================================================== */
input[type=text], input[type=search], textarea, select {
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
input[type=text]:focus, input[type=search]:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(91, 91, 214, .14);
}
.searchbar input[type=search], .searchbar select { background: var(--surface); }
.check input { accent-color: var(--primary); }

.tblwrap { border-radius: var(--r-md); box-shadow: var(--shadow); }
.tbl th { background: var(--raise); color: var(--faint); letter-spacing: .07em; }
.tbl tr { transition: background-color var(--dur-fast) ease; }
@media (hover:hover) and (pointer:fine) {
  .tbl tbody tr:hover td, .tbl tr:hover td { background: #f8f8fe; }
}

/* ============================================================================
   PILLS · TIMELINE · CHARTS — one accent story across every data surface.
   ========================================================================== */
.pill { font-weight: 620; }
.pill.prov { border-style: solid; }
.tag { background: var(--primary-soft); color: var(--primary-ink); }
.prov-chip { background: var(--raise); }

.tl { border-left-color: #dcdaf6; }
.ev::before { box-shadow: 0 0 0 3px rgba(91, 91, 214, .12); }
.ev .body { border-radius: var(--r-sm); }

/* charts consume the tokens (sparkline/donut/bars/ring pick up indigo + mint
   automatically); tune only the fills that read too heavy on cool ground */
.sparkfill { opacity: .5; }
.bartrack, .meter, .sigbar { background: #eeeefa; }
.ring .track { stroke: #eeeefa; }
.livedot { background: var(--success); box-shadow: 0 0 0 0 var(--success); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(15, 122, 99, .35); }
  70%  { box-shadow: 0 0 0 6px rgba(15, 122, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(15, 122, 99, 0); }
}

/* ============================================================================
   MOMENTS — kid surface, report letterhead, toast: same family, softer hand.
   ========================================================================== */
.kid { background: linear-gradient(160deg, #eeedfd, #f3f4fc 55%, #e9f5f1); }
.kidcount .big { color: var(--primary); }
.sticker { background: var(--success-soft); }

.letterhead { border-bottom-color: var(--primary); }
.letterhead .lh-mark {
  background: linear-gradient(140deg, var(--grad-a), var(--grad-b));
  box-shadow: 0 2px 8px rgba(91, 91, 214, .3);
}
.report-summary { border-left-color: var(--grad-a); }

.toast {
  background: #26264a;             /* deep indigo, not flat black */
  color: #f4f4ff;
  box-shadow: 0 4px 12px rgba(35, 35, 80, .25), 0 14px 40px rgba(35, 35, 80, .3);
}

.langs { background: var(--raise); }
.langs button.on { color: var(--primary-ink); }
.themebtn { transition: border-color var(--dur-fast) ease; }
@media (hover:hover) and (pointer:fine) {
  .themebtn:hover { border-color: #c9c6f0; }
}