/* ==========================================================================
   Learning With Badri — Mode terang (gaya Mainframe)
   Putih bersih · teks hitam · tombol pill · font Helvetica Now.
   Aktif saat <html data-theme="light">; mode gelap tetap di tokens.css.
   ========================================================================== */

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

  --color-primary: #000000;
  --color-primary-hover: #333333;
  --color-primary-soft: rgba(0, 0, 0, 0.06);
  --color-primary-border: rgba(0, 0, 0, 0.25);

  --color-success: #059669;
  --color-success-strong: #047857;
  --color-success-soft: rgba(5, 150, 105, 0.1);
  --color-success-border: rgba(5, 150, 105, 0.35);

  --color-danger: #dc2626;
  --color-danger-soft: rgba(220, 38, 38, 0.08);
  --color-danger-border: rgba(220, 38, 38, 0.35);

  --color-warning: #b45309;
  --color-warning-soft: rgba(180, 83, 9, 0.1);

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-solid: #ffffff;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.25);

  --color-text-primary: #000000;
  --color-text-secondary: rgba(0, 0, 0, 0.7);
  --color-text-tertiary: rgba(0, 0, 0, 0.5);
  --color-text-on-primary: #ffffff;

  --bg-image: none;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.12);
  --focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.2);

  --font-ui: 'HelveticaNowDisplayW01-Rg', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
  --font-heading: 'HelveticaNowDisplay-Medium', 'Helvetica Neue', Arial, sans-serif;
}

html[data-theme="light"] body { background: #ffffff; }

/* Tombol: pill putih, berubah hitam saat disentuh */
html[data-theme="light"] .btn { border-radius: var(--radius-full); }
html[data-theme="light"] .btn--secondary { background: #ffffff; color: #000000; border: 1px solid rgba(0, 0, 0, 0.1); }
html[data-theme="light"] .btn--secondary:hover { background: #000000; color: #ffffff; }
html[data-theme="light"] .btn--ghost:hover { background: rgba(0, 0, 0, 0.06); }

/* Header */
html[data-theme="light"] .site-header { background: rgba(255, 255, 255, 0.9); border-bottom-color: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .brand { color: #000000; font-style: normal; letter-spacing: -0.03em; }
html[data-theme="light"] .brand::after { content: "\2733\FE0E"; font-size: 1.1em; letter-spacing: -0.02em; user-select: none; }
html[data-theme="light"] .brand-mark { color: #000000; }
html[data-theme="light"] .nav-links { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme="light"] .nav-link { color: #000000; transition: opacity var(--duration) var(--ease); }
html[data-theme="light"] .nav-link:hover { background: transparent; color: #000000; opacity: 0.6; }
html[data-theme="light"] .nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }

html[data-theme="light"] .site-footer { background: #ffffff; }

/* Rank: warna rank tetap di garis & bar, teksnya hitam supaya terbaca di latar putih */
html[data-theme="light"] .rank-badge { background: #ffffff; color: #000000; }
html[data-theme="light"] .rank-top strong { color: #000000; }
html[data-theme="light"] .rank-bar { background: rgba(0, 0, 0, 0.08); }
html[data-theme="light"] .rank-up { background: rgba(251, 191, 36, 0.12); }

/* Tombol ganti mode (dipasang oleh app.js) */
.theme-toggle {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: var(--button-sm); height: var(--button-sm); padding: 0; border-radius: var(--radius-full);
  background: transparent; color: var(--color-text-primary); border: 1px solid var(--color-border-strong);
  cursor: pointer; transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.theme-toggle:hover { background: var(--color-text-primary); color: var(--color-bg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }  /* gelap: tampilkan matahari (pindah ke terang) */
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* Judul: Helvetica tegak, tanpa miring (miring hanya ciri mode gelap) */
html[data-theme="light"] h1, html[data-theme="light"] h2,
html[data-theme="light"] .greeting, html[data-theme="light"] .current-name,
html[data-theme="light"] [class*="t-h"], html[data-theme="light"] [class*="t-display"] { font-style: normal; }

/* Nama rank: warna rank digelapkan supaya terbaca di latar putih */
html[data-theme="light"] .current-name,
html[data-theme="light"] .step-name { color: color-mix(in srgb, var(--rank-color, #000) 45%, #000); }