:root {
  color-scheme: dark;
  --ink: #e8ece6;      /* 10.0:1 di panel */
  --muted: #a3ac9e;    /* 5.1:1 di surface paling terang */
  --paper: #141814;    /* latar halaman */
  --white: #1b211b;    /* latar kartu */
  --green: #7fb08c;    /* aksen, 4.84:1 di panel */
  --green-dark: #2c3a30;
  --line: #2f382f;
  --orange: #e0a077;   /* 5.39:1 di panel */
  --orange-bright: #e8a877;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
}

/* =================================================================
   DARK MODE
   Semua rasio kontras di bawah sudah dihitung terhadap empat
   permukaan gelap yang dipakai.
   ================================================================= */
body {
  background: var(--paper);
}

/* Permukaan yang tadinya terang */
.field input,
.comment-form select,
.comment-form textarea,
.admin-login-form input,
.admin-user-search input,
.admin-create-form input,
.admin-table-input,
select,
textarea {
  background: #161c16;
  border-color: #333c33;
  color: var(--ink);
}

.field input::placeholder {
  color: #8b9488;
}

.login-side {
  background: linear-gradient(145deg, #171d17 0%, #121712 100%);
}

.page {
  background: #101410;
}

.story {
  background: #26362a;
}

.dashboard-greeting {
  background: linear-gradient(135deg, #22301f 0%, #1a2419 100%);
}

.dashboard-avatar,
.profile-photo-preview {
  background: #1f2a20;
  border-color: var(--green);
}

.account-summary dl > div,
.received-comment,
.comments-empty {
  background: #1e261e;
  border-color: #2f382f;
}

.photo-status-preview,
.photo-status-image-button,
.admin-user-photo,
.admin-user-photo-empty {
  background: #151b15;
}

.dashboard-header,
.dashboard-topbar,
.admin-login-main input {
  background: var(--white);
}

/* Aksen teks */
.eyebrow {
  color: #c9d6c0;
}

.story h1 span,
.brand-mark {
  color: var(--orange);
}

.brand-mark {
  border-color: rgba(255, 255, 255, 0.4);
}

.story-description,
.story-footer {
  color: rgba(240, 244, 238, 0.88);
}

.status[data-state="error"],
.comments-status[data-state="error"],
.profile-photo-remove,
.message-delete,
.message-reply,
.admin-delete {
  color: #f0a094;
}

.profile-photo-remove,
.message-delete,
.message-reply,
.admin-delete {
  border-color: #6b3a34;
  background: #241a18;
}

.admin-delete {
  background: #241a18;
}

.admin-delete:hover,
.profile-photo-remove:hover,
.message-reply:hover {
  background: #3a2523;
}

.comments-count {
  background: rgba(127, 176, 140, 0.16);
  color: var(--green);
}

.admin-message {
  background: rgba(127, 176, 140, 0.1);
  border-left-color: var(--green);
  color: #cfe6d5;
}

.admin-message[data-state="error"] {
  background: rgba(240, 160, 148, 0.1);
  border-color: #f0a094;
  color: #f5c4bb;
}

.dashboard-logout {
  border-color: #333c33;
  background: transparent;
}

.dashboard-signout { border-color: var(--line); }

.back-to-top {
  color: #10180f;
  background: var(--green);
}

.back-to-top:hover { background: #93c49f; }

/* Tombol utama: hijau solid justru kontrasnya turun di latar gelap,
   jadi memakai warna aksen terang dengan teks gelap. */
.submit-button,
.comment-submit,
.admin-primary,
.admin-save,
.profile-photo-input-label {
  background: var(--green);
  color: #10180f;
}

.submit-button:hover,
.comment-submit:hover,
.admin-primary:hover,
.admin-save:hover,
.profile-photo-input-label:hover {
  background: #93c49f;
}

.comment-submit:disabled {
  background: #2f3a30;
  color: #8b9488;
}

.photo-status-lightbox {
  background: #0c100c;
}

/* Warna teks yang tadinya hardcoded gelap (#454b43, #555c52, #a33d32, #b34739,
   #92372d) tidak terbaca di latar gelap. Semua di Miscellaneous override. */
.field input::placeholder {
  color: #8b9488;
}

.remember {
  color: var(--muted);
}

.received-comment > p {
  color: #dfe4dc;
}

.status[data-state="error"],
.comments-status[data-state="error"] {
  color: #f0a094;
}

.admin-message[data-state="error"] {
  color: #f5c4bb;
}

/* Link tetap harus terbaca dan bisa dikenali */
a,
.form-options a,
.signup a,
.admin-login-back,
.admin-nav a,
.dashboard-admin-link {
  color: var(--green);
}

/* --- Dark mode untuk komponen baru --- */
.avatar-image {
  background: #1f2a20;
}

.ring-track {
  stroke: rgba(232, 236, 230, 0.22);
}

.ring-progress {
  stroke: var(--green);
}

.status-media {
  background: #151b15;
}

/* --- Dark mode untuk shell --- */
.rail-nav,
.rail-user,
.dashboard-account,
.composer,
.feed-section,
.comments-section,
.profile-card,
.compose-card {
  background: var(--white);
}

.rail-link:hover,
.rail-link.is-current,
.dashboard-nav-link:hover,
.dashboard-nav-link.is-current {
  background: rgba(127, 176, 140, 0.12);
  color: var(--green);
}

.rail-badge {
  color: #10180f;
}

.rail-user-avatar,
.dashboard-account-avatar,
.composer-avatar {
  background: linear-gradient(140deg, #4a6b52, #2a3b2d);
}

.rail-logout:hover {
  border-color: var(--green);
}

.quota {
  background: #1e261e;
}

.quota-bar {
  background: #2f382f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* --- Dark mode --- */
.auth-art {
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(232, 199, 155, 0.12) 0%, transparent 55%),
    radial-gradient(120% 90% at 15% 10%, #33513c 0%, transparent 55%),
    radial-gradient(90% 80% at 85% 95%, #101a13 0%, transparent 60%),
    linear-gradient(160deg, #203026 0%, #16221a 55%, #0f160f 100%);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .auth-display em {
    background: linear-gradient(115deg, #f4ddb2 10%, #e8c79b 45%, #d9a86c 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.auth-form-side {
  background: var(--paper);
}

.auth-eyebrow {
  color: #d3bd97;
}

.auth-display em {
  color: #e6c79b;
}

.auth-art-meta,
.auth-art-foot {
  color: rgba(240, 244, 238, 0.6);
}

.auth-note {
  background: rgba(127, 176, 140, 0.1);
}

.submit-button-ghost {
  color: var(--green);
  box-shadow: inset 0 0 0 1px #333c33;
}