/* ==========================================================================
   Lingosprint — Global Theme System (Light / Dark) · SPEC-002f rollout
   Dimuat SETELAH CSS halaman (dashboard/auth/lesson/landing/admin/error).
   Dark mode memakai basis Darkroom #1F1614 (konsisten SPEC-002a Brainrot).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme toggle button (shared)
   -------------------------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--paper-line, #E2CFB5);
  border-radius: 13px;
  background: #fff;
  color: var(--ink-soft, #5C4540);
  cursor: pointer;
  box-shadow: 0 3px 0 var(--paper-line, #E2CFB5);
  transition: transform .1s ease, box-shadow .1s ease;
}

.theme-toggle:hover { transform: translateY(-2px); }

.theme-toggle:focus-visible {
  outline: 3px solid var(--cinnabar-dark, #8F2F2A);
  outline-offset: 3px;
}

.theme-toggle svg { display: none; }

html[data-theme="light"] .theme-toggle .icon-moon,
html:not([data-theme]) .theme-toggle .icon-moon { display: block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Varian kompak untuk header padat (lesson header) */
.theme-toggle-sm { width: 37px; height: 37px; border-radius: 11px; }

/* Shared clean-room brand lockup. The darkroom variant is swapped without JS. */
.brand-lockup { display: inline-flex; align-items: center; flex: none; line-height: 0; text-decoration: none; }
.brand-lockup .brand-image { display: block; height: auto; }
.brand-lockup .brand-image-dark { display: none; }
html[data-theme="dark"] .brand-lockup .brand-image-light { display: none; }
html[data-theme="dark"] .brand-lockup .brand-image-dark { display: block; }

/* --------------------------------------------------------------------------
   Dark theme — token remap (semua page CSS mengonsumsi token ini)
   -------------------------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;

  --rice-paper: #1F1614;
  --paper-deep: #2A1C18;
  --paper-line: #3C2B27;
  --ink: #FFF8EC;
  --ink-soft: #DBCAC3;
  --blush: #4B2E2A;
  --lock-shadow: #2E211D;
  --ink-tint: #3C2B27;
  --ink-tint-2: #463430;
  --saffron-dark: #F0C36D;
  --umber-success: #DEC37A;
  --deep-error: #E8A79D;

  /* Semantic accent variants must remain readable on Darkroom surfaces. */
  --clay: #D48A69;
  --clay-dark: #E1A188;

  /* Admin tokens (SPEC-002b) */
  --text-primary: #FFF8EC;
  --text-secondary: #DBCAC3;
  --text-muted: #CDB8A0;
  --bg-off: #211714;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] body { background: var(--rice-paper); }

html[data-theme="dark"] .nav,
html[data-theme="dark"] .auth-nav,
html[data-theme="dark"] .site-nav,
html[data-theme="dark"] .lesson-header {
  border-color: var(--paper-line);
  background: rgba(31, 22, 20, .94);
}

html[data-theme="dark"] .foot-mini,
html[data-theme="dark"] .auth-mini-footer,
html[data-theme="dark"] .lesson-footer {
  background: rgba(31, 22, 20, .82);
  color: var(--ink-soft);
}

html[data-theme="dark"] .mobile-menu { background: #261A17; }

/* Warna brand tetap stabil di kedua mode (cinnabar/saffron/apricot/clay). */

/* --------------------------------------------------------------------------
   Dark theme — override surface hardcoded #fff / white
   -------------------------------------------------------------------------- */

html[data-theme="dark"] .lang-chip,
html[data-theme="dark"] .logout-btn,
html[data-theme="dark"] .streak-pill,
html[data-theme="dark"] .card,
html[data-theme="dark"] .pnode .dot,
html[data-theme="dark"] .lives-cluster-wrap .lives-cluster,
html[data-theme="dark"] .review-chips .review-chip,
html[data-theme="dark"] .activity-list .activity-row .activity-icon,
html[data-theme="dark"] .weekly-chain .chain-node .chain-dot,
html[data-theme="dark"] .auth-back,
html[data-theme="dark"] .auth-card,
html[data-theme="dark"] .auth-tabs,
html[data-theme="dark"] .auth-tab.is-active,
html[data-theme="dark"] .auth-input,
html[data-theme="dark"] .auth-social,
html[data-theme="dark"] .icon-button,
html[data-theme="dark"] .lesson-card,
html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .choice-option,
html[data-theme="dark"] .choice-marker,
html[data-theme="dark"] .text-answer,
html[data-theme="dark"] .tool-tab,
html[data-theme="dark"] .candidate-button,
html[data-theme="dark"] .preview-wrap,
html[data-theme="dark"] .tool-control,
html[data-theme="dark"] .stroke-figure,
html[data-theme="dark"] .stroke-breakdown .stroke-chip,
html[data-theme="dark"] .result-stat,
html[data-theme="dark"] .exit-dialog,
html[data-theme="dark"] .lesson-header .lives-tooltip,
html[data-theme="dark"] .stat-pill,
html[data-theme="dark"] .demo-card,
html[data-theme="dark"] .answer-option,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .tab-list,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .path-start,
html[data-theme="dark"] .comparison-strip,
html[data-theme="dark"] .practice-card,
html[data-theme="dark"] .step-card > .icon,
html[data-theme="dark"] .faq-list details,
html[data-theme="dark"] .language-chip,
html[data-theme="dark"] .toast,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .draft-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] .theme-toggle {
  background: #261A17;
}

html[data-theme="dark"] .auth-input,
html[data-theme="dark"] .text-answer,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .form-textarea { color: var(--ink); }

html[data-theme="dark"] .auth-card { background: #2D201C; border-color: #4A372F; box-shadow: 0 10px 28px rgba(0,0,0,.45); }
html[data-theme="dark"] .auth-tabs { background: #2A1C18; border-color: #3C2B27; }
html[data-theme="dark"] .auth-input::placeholder { color: rgba(205,184,160,.72); }
html[data-theme="dark"] .auth-actions .theme-toggle { box-shadow: 0 2px 0 rgba(0,0,0,.35); }

/* ------------------------------------------------------------------------
   Dark theme — aksent permukaan gelap dipin ke warna asli (tetap gelap,
   tidak ikut ter-inversi token)
   ------------------------------------------------------------------------ */

html[data-theme="dark"] .brainrot,
html[data-theme="dark"] .brainrot-preview { background: #241A17; color: #FFF8EC; }

html[data-theme="dark"] .brainrot h3 { color: #FFF8EC; }

html[data-theme="dark"] .brainrot .obj { color: #F3E4CC; }

html[data-theme="dark"] .brainrot-question { background: #3A302D; color: #FFF8EC; }

html[data-theme="dark"] .brainrot-question label { color: #F3E4CC; }

html[data-theme="dark"] .exercise-chips span:first-child { background: #241A17; color: #FFF8EC; }

/* ------------------------------------------------------------------------
   Dark theme — kanvas Hanzi (grid米字格 diredupkan)
   ------------------------------------------------------------------------ */

html[data-theme="dark"] .hanzi-canvas,
html[data-theme="dark"] .writing-grid {
  background-color: #211714;
  background-image:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 248, 236, .14) 49.5%, rgba(255, 248, 236, .14) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255, 248, 236, .14) 49.5%, rgba(255, 248, 236, .14) 50.5%, transparent 50.5%),
    linear-gradient(45deg, transparent 49.6%, rgba(255, 248, 236, .14) 49.6%, rgba(255, 248, 236, .14) 50.4%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, rgba(255, 248, 236, .14) 49.6%, rgba(255, 248, 236, .14) 50.4%, transparent 50.4%);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 236, .08);
}

html[data-theme="dark"] .stroke-figure svg {
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255, 248, 236, .1) 49.5%, rgba(255, 248, 236, .1) 50.5%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(255, 248, 236, .1) 49.5%, rgba(255, 248, 236, .1) 50.5%, transparent 50.5%),
    linear-gradient(45deg, transparent 49.6%, rgba(255, 248, 236, .1) 49.6%, rgba(255, 248, 236, .1) 50.4%, transparent 50.4%),
    linear-gradient(-45deg, transparent 49.6%, rgba(255, 248, 236, .1) 49.6%, rgba(255, 248, 236, .1) 50.4%, transparent 50.4%),
    #211714;
}

html[data-theme="dark"] .stroke-result.is-near { background: rgba(214, 155, 45, .1); }

html[data-theme="dark"] .stroke-result.is-fail { background: rgba(184, 59, 50, .12); }

/* Watermark Hanzi (text-stroke var(--paper-deep)) otomatis adaptif via token. */

/* ------------------------------------------------------------------------
   Dark theme — dashboard readability and compact status surfaces
   ------------------------------------------------------------------------ */

html[data-theme="dark"] .btn-green,
html[data-theme="dark"] .auth-btn,
html[data-theme="dark"] .button.primary,
html[data-theme="dark"] .activity-link {
  color: #FFF8EC;
}

html[data-theme="dark"] .dashboard-page .btn-blue {
  border: 1px solid #6A4C42;
  background: #3A2924;
  box-shadow: 0 5px 0 #1B100D;
  color: #F3E4CC;
}

html[data-theme="dark"] .dashboard-page .btn-blue:hover:not(:disabled) {
  background: #52382F;
  color: #FFF8EC;
}

html[data-theme="dark"] .dashboard-page .btn-blue:active:not(:disabled) {
  box-shadow: 0 1px 0 #1B100D;
}

html[data-theme="dark"] .dashboard-page .status-badge,
html[data-theme="dark"] .dashboard-page .br-badge,
html[data-theme="dark"] .dashboard-page .btn-br,
html[data-theme="dark"] .dashboard-page .weekly-chain .chain-node.is-reward .chain-dot {
  color: #241A17;
}

html[data-theme="dark"] .dashboard-page .path-chip-daily {
  background: #4B2E2A;
  border-color: #B83B32;
}

html[data-theme="dark"] .dashboard-page .path-chip-daily .path-icon {
  background: #4B2E2A;
  color: #F0A49A;
}

html[data-theme="dark"] .dashboard-page .path-chip-weekly .path-icon {
  color: #241A17;
}

html[data-theme="dark"] .dashboard-page .path-chip .badge-avail {
  background: #E1A188;
  color: #241A17;
}

html[data-theme="dark"] .dashboard-page .path-chip .badge-run {
  background: #F0C36D;
  color: #241A17;
}

html[data-theme="dark"] .dashboard-page .path-chip .badge-done {
  background: #4B2E2A;
  color: #F0C36D;
  border: 1px solid #463430;
}

html[data-theme="dark"] .dashboard-page .path-chip .badge-lock,
html[data-theme="dark"] .dashboard-page .path-chip .badge-proc {
  background: #3C2B27;
  color: #DBCAC3;
  border: 1px solid #463430;
}

html[data-theme="dark"] .dashboard-page .path-chip .path-stamp {
  background: #FFF8EC;
  color: #241A17;
  border: 1px solid #E2CFB5;
}

html[data-theme="dark"] .dashboard-page .review {
  background: #3A2723;
  border-color: #5B4037;
}

html[data-theme="dark"] .dashboard-page .review .reason,
html[data-theme="dark"] .dashboard-page .brainrot .obj,
html[data-theme="dark"] .dashboard-page .br-chips span,
html[data-theme="dark"] .dashboard-page .br-note {
  color: #F3E4CC;
}

html[data-theme="dark"] .dashboard-page .br-chips span {
  border-color: #6A5148;
}

html[data-theme="dark"] .dashboard-page .br-note {
  background: #3C2B27;
}

html[data-theme="dark"] .dashboard-page .eyebrow,
html[data-theme="dark"] .dashboard-page .daily .lesson-meta,
html[data-theme="dark"] .dashboard-page .activity-archive,
html[data-theme="dark"] .dashboard-page .review-more,
html[data-theme="dark"] .dashboard-page .review-chips .chip-pinyin {
  color: #F0A49A;
}

html[data-theme="dark"] .dashboard-page .pnode.completed small b,
html[data-theme="dark"] .dashboard-page .activity-list .activity-row .activity-icon {
  color: #F0A49A;
}

html[data-theme="dark"] .dashboard-page .activity-list .activity-row .activity-chip {
  background: #4B2E2A;
  color: #F0A49A;
}

html[data-theme="dark"] .dashboard-page .activity-list .activity-row .activity-chip.activity-chip-weekly {
  background: #3A2924;
  color: #E1A188;
}

html[data-theme="dark"] .dashboard-page .activity-list .activity-row .activity-chip.activity-chip-brainrot {
  color: #F0C36D;
}

html[data-theme="dark"] .dashboard-page .activity-list .activity-row .activity-score {
  color: #E1A188;
}