/*
 * marcela-dark.css
 * Dark Study Theme — Phase 3B
 *
 * Token override layer activated by html[data-theme="dark"].
 * Loaded after marcela-shell.css and marcela-learning-page.css.
 * No component definitions are duplicated or modified.
 *
 * Activation: set by marcela-theme.js via
 *   document.documentElement.setAttribute('data-theme', 'dark')
 *
 * Priority:
 *   1. User saved preference (localStorage)
 *   2. System prefers-color-scheme
 *   3. Light fallback (no attribute required)
 *
 * Print: @media print block restores all light-mode values
 * when printing from dark mode.
 *
 * Phase 3B change from 3A:
 *   - All rules scoped to html[data-theme="dark"]
 *   - --ink-faint nudged from #7a8fa6 to #8aa0b8 for
 *     long-session readability (~5.6:1 vs ~5.0:1 contrast)
 */

/* =============================================
   CORE TOKEN OVERRIDES
   Declared on the html element so custom
   properties inherit to all descendants.
   ============================================= */
html[data-theme="dark"] {
  /* ---- Surfaces ---- */
  --bg:                #0d1117;
  --paper:             #141c26;
  --focus-bg:          #1a2436;
  --focus-bg-strong:   #1e2a3e;
  --peer-bg:           #171e2a;

  /* ---- Text ---- */
  --ink:               #edf2f7;
  --ink-soft:          #b8c8da;
  --ink-faint:         #8aa0b8;   /* Phase 3B: +16/+17/+18 per channel from 3A for readability */
  --line:              #2a3545;

  /* ---- Borders ---- */
  --rule:              #2c3a4e;
  --rule-light:        #1e2a3a;

  /* ---- Accent — blue family, lightened for dark surfaces ---- */
  --accent:            #4e84c4;
  --accent-deep:       #85b0e0;
  --accent-light:      #24446e;

  /* ---- Status — same hues, brightness adjusted for dark ---- */
  --status-clear:      #4caf7b;
  --status-caution:    #c8963a;
  --status-blocked:    #d96060;
  --status-return:     #9472cc;

  /* ---- Status backgrounds — very dark tints ---- */
  --status-clear-bg:   #0a1f11;
  --status-caution-bg: #1c1400;
  --status-blocked-bg: #1c0b0b;
  --status-return-bg:  #120b1f;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.32);
  --shadow-md: 0 2px 8px rgba(0,0,0,.42);
  --shadow-lg: 0 6px 24px rgba(0,0,0,.58);
}


/* =============================================
   ATMOSPHERIC BACKGROUND
   Extremely subtle radial washes. Depth only —
   content is always the visual primary.
   ============================================= */
html[data-theme="dark"] .app {
  background:
    radial-gradient(circle at 15% 0%, rgba(78,130,200,.07), transparent 38%),
    radial-gradient(circle at 88% 8%,  rgba(76,175,123,.05), transparent 38%),
    var(--bg);
}


/* =============================================
   SHELL SURFACES
   ============================================= */
html[data-theme="dark"] .context-bar  { background: var(--bg); border-bottom-color: var(--rule); }
html[data-theme="dark"] .segment-tabs { background: var(--paper); border-bottom-color: var(--rule); }
html[data-theme="dark"] .action-zone  { background: var(--paper); border-top-color:    var(--rule); }

/* Left rail — deeper surface than content region */
html[data-theme="dark"] .left-rail {
  background: #090d13;
  border-right: 1px solid var(--rule);
}


/* =============================================
   NAVIGATION & CURRICULUM READABILITY
   The curriculum shell now uses tokenized
   surfaces for the block, unit, and page rows.
   Dark mode only needs a small readability lift
   for the smallest labels and topic counts.
   ============================================= */
html[data-theme="dark"] .block-meta .block-label        { color: var(--ink-soft); }
html[data-theme="dark"] .tc-count                      { color: var(--ink-soft); }
html[data-theme="dark"] .topic-card.available .tc-count { color: var(--accent-deep); }


/* =============================================
   REFERENCE TABLE HEADER
   .ref-table th uses background: var(--ink) in
   base CSS. In dark mode --ink is light text;
   remap to a deep surface explicitly.
   ============================================= */
html[data-theme="dark"] .ref-table th {
  background: #090d13;
  color: rgba(255,255,255,.6);
}


/* =============================================
   DIAGRAM APEX NODE
   .node.apex uses background: var(--ink).
   Same --ink conflict — remap explicitly.
   ============================================= */
html[data-theme="dark"] .node.apex {
  background: #1d2a3e;
  border-color: var(--accent);
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
}
html[data-theme="dark"] .node.apex .nt { color: var(--accent-deep); }


/* =============================================
   HARDCODED COLOR OVERRIDES
   Components that use literal hex values and
   do not respond to :root token remaps.
   ============================================= */

/* ---- Recall answer panel ---- */
html[data-theme="dark"] .rc-answer {
  background: #182030;
  border-top-color: var(--rule);
}

/* ---- Recall done state ---- */
html[data-theme="dark"] .recall-card.done {
  background: #0e1c14;
  border-color: #2a5038;
}
html[data-theme="dark"] .rc-done-btn {
  background: #102018;
  border-color: #2a5038;
  color: #5cb87a;
}

/* ---- Source status banner ---- */
html[data-theme="dark"] .source-status-banner { border-color: #2a5038; }

/* =============================================
   PRINT — restore light-mode for printing
   Uses html[data-theme="dark"] to match and
   override the dark declarations above.
   ============================================= */
@media print {
  html[data-theme="dark"] {
    --bg:                #ffffff;
    --paper:             #ffffff;
    --focus-bg:          #eef1f7;
    --focus-bg-strong:   #e4e9f3;
    --peer-bg:           #fbfbfc;
    --ink:               #1a1c20;
    --ink-soft:          #4c525b;
    --ink-faint:         #8b9099;
    --rule:              #c6cbd2;
    --rule-light:        #e4e7ec;
    --accent:            #3f5d86;
    --accent-deep:       #2f486b;
    --accent-light:      #d4dff0;
    --status-clear:      #1e6b3e;
    --status-caution:    #8b5c00;
    --status-blocked:    #8b2500;
    --status-return:     #5c2d91;
    --status-clear-bg:   #e8f5ee;
    --status-caution-bg: #fef3e2;
    --status-blocked-bg: #fdf0eb;
    --status-return-bg:  #f1ebfb;
    --shadow-sm:         none;
    --shadow-md:         none;
    --shadow-lg:         none;
  }

  html[data-theme="dark"] .app              { background: #ffffff !important; }
  html[data-theme="dark"] .left-rail        { background: #1a1c20 !important; border-right: none !important; }
  html[data-theme="dark"] .context-bar,
  html[data-theme="dark"] .segment-tabs,
  html[data-theme="dark"] .action-zone      { background: #ffffff !important; border-color: #c6cbd2 !important; }
  html[data-theme="dark"] .ref-table th     { background: #1a1c20 !important; color: rgba(255,255,255,.75) !important; }
  html[data-theme="dark"] .node.apex        { background: #1a1c20 !important; border-color: #1a1c20 !important; }
  html[data-theme="dark"] .node.apex .nt    { color: #ffffff !important; }
  html[data-theme="dark"] .rc-answer        { background: #f5f7fc !important; border-top-color: #e4e7ec !important; }
  html[data-theme="dark"] .recall-card.done { background: #f7fdf8 !important; border-color: #a3c9a8 !important; }
  html[data-theme="dark"] .rc-done-btn      { background: #e8f5ee !important; border-color: #a3c9a8 !important; color: #1e6b3e !important; }
  html[data-theme="dark"] .source-status-banner { border-color: #a3c9a8 !important; }
  html[data-theme="dark"] .unit-list        { background: #f8f9fb !important; }
  html[data-theme="dark"] .page-link-list  { background: #f2f4f8 !important; border-top-color: var(--rule-light) !important; }
}