/* Shared appearance: CSS follows the device setting, including live changes. */
:root {
    color-scheme: light;

  --green:#075c2d;
  --green-2:#0a7138;
  --green-3:#dff0e4;
  --deep:#063d20;
  --cream:#f7f7f1;
  --paper:#fff;
  --ink:#15201a;
  --muted:#69756d;
  --line:#e3e8e3;
  --gold:#d9b84c;
  --danger:#a23b2d;
  --shadow:0 18px 50px rgba(8,48,27,.09);
  --radius:22px;
  --max:1180px;
  --border: rgba(0, 0, 0, 0.08);


    --bg: var(--cream);
    --surface: #eef5ee;
    --surface-alt: #f5f5ef;
    --text: var(--ink);
    --text-secondary: var(--muted);
    --muted-text: var(--muted);
    --border-color: var(--line);
    --green-soft: var(--green-3);
    --on-accent: #ffffff;
    --brand-background: #075c2d;
}

html { background: var(--cream); color: var(--ink); }
input, select, textarea { accent-color: var(--green); }

/* =========================================================
   AUTOMATIC DARK MODE
   Follows the user's OS / browser appearance setting
========================================================= */

@media (prefers-color-scheme: dark) {

  :root {
    color-scheme: dark;
    --on-accent: #07100b;
    --green: #35c978;
    --green-2: #42d987;
    --green-3: #173324;

    --deep: #08140e;

    --cream: #0d1410;
    --paper: #121b15;

    --ink: #edf5f0;
    --muted: #a2afa7;

    --line: #26342b;

    --gold: #d9b84c;
    --danger: #e06c5b;

    --shadow: 0 18px 50px rgba(0, 0, 0, .28);

    --border: rgba(255, 255, 255, .10);

    --bg: #0d1410;
    --surface: #121b15;
    --surface-alt: #111a14;

    --text: #edf5f0;
    --text-secondary: #a2afa7;

    --muted-text: #a2afa7;

    --border-color: #26342b;
  }


  /* =========================
     GLOBAL
  ========================= */

  html,
  body {
    background: var(--cream);
    color: var(--ink);
  }

  body {
  }


  /* =========================
     HEADER
  ========================= */

  .header {
    background: rgba(13, 20, 16, .94);
    border-bottom-color: rgba(38, 52, 43, .9);
  }

  .brand-name {
    color: var(--green);
  }

  .brand-tag {
    color: var(--muted);
  }

  .header-search {
    background: var(--paper);
    border-color: var(--line);
  }

  .header-search input {
    color: var(--ink);
  }

  .header-search input::placeholder {
    color: var(--muted);
  }

  .mobile-nav {
    background: var(--cream);
    border-color: var(--line);
  }


  /* =========================
     GENERAL CARDS / PANELS
  ========================= */

  .card,
  .panel,
  .resource,
  .check,
  .event,
  .group-card,
  .search-page,
  .table-wrap {
    background: var(--paper);
    border-color: var(--line);
  }

  .panel.soft {
    background: #142219;
  }

  .section-muted {
    background: var(--surface);
  }

  .nav-grid-item:hover {
    background: #142219;
  }


  /* =========================
     PAGE HERO
  ========================= */

  .page-hero {
    background:
      linear-gradient(
        180deg,
        #13241a 0%,
        var(--cream) 100%
      );

    border-bottom-color: var(--border-color);
  }

  .page-hero p,
  .page-intro {
    color: var(--muted);
  }


  /* =========================
     TABLES
  ========================= */

  table {
    color: var(--ink);
  }

  th {
    background: #15231a;
    color: var(--green);
  }

  th,
  td {
    border-bottom-color: var(--line);
  }


  /* =========================
     BUTTONS / FILTERS
  ========================= */

  .btn-outline {
    background: var(--paper);
    color: var(--green);
    border-color: var(--green);
  }

  .filter {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
  }

  .filter.active,
  .filter:hover {
    background: var(--green);
    color: #07100b;
    border-color: var(--green);
  }


  /* =========================
     SEARCH
  ========================= */

  .search-page {
    background: var(--paper);
  }

  .search-page input {
    color: var(--ink);
  }

  .search-page input::placeholder {
    color: var(--muted);
  }


  /* =========================
     NOTICES
  ========================= */

  .notice {
    background: #152a1d;
    color: var(--ink);
  }

  .alert {
    background: #2b1715;
  }

  .note {
    background: #111b15;
    color: var(--muted);
  }

  .note strong {
    color: var(--ink);
  }


  /* =========================
     RESOURCE LIBRARY
  ========================= */

  .resource-page-hero {
    background: #101812;
    border-bottom-color: var(--line);
  }

  .resource-page-hero p,
  .resource-intro p,
  .library-row p,
  .library-empty p,
  .study-guide-row p {
    color: var(--muted);
  }

  .resource-library-section {
    background: #0f1712;
  }

  .library-controls label {
    color: var(--ink);
  }

  .library-controls input,
  .library-controls select {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
  }

  .library-controls input::placeholder {
    color: var(--muted);
  }

  .resource-library,
  .library-row,
  .study-guide-list,
  .study-guide-row {
    border-color: var(--line);
  }

  .library-code,
  .library-download,
  .study-number {
    color: var(--green);
  }

  .resource-notice {
    background: #0f2c1c;
    color: #fff;
  }

  .resource-notice p {
    color: #c3d7c9;
  }


  /* =========================
     EXPLORE
  ========================= */

  .explore-section-alt {
    background: #111913;
  }

  .map-placeholder {
    background: #151e18;
    border-color: var(--line);
  }

  .map-placeholder p,
  .map-actions p,
  .sug-intro p,
  .explore-link p {
    color: var(--muted);
  }

  .map-feature,
  .sug-intro,
  .explore-links,
  .explore-link,
  .executive-placeholder {
    border-color: var(--line);
  }


  /* =========================
     EXECUTIVES
  ========================= */

  .executive-card {
    background: var(--paper);
    border-color: var(--line);
  }

  .executive-image {
    background: #18221b;
  }

  .executive-info p {
    color: var(--muted);
  }

  .session-label {
    border-color: rgba(53, 201, 120, .35);
  }


  /* =========================
     SEARCH RESULTS
  ========================= */

  .search-result-title a {
    color: var(--ink);
  }

  .search-result-description {
    color: var(--muted);
  }

  .search-category-head,
  .search-result-item {
    border-color: var(--line);
  }


  /* =========================
     CONTRIBUTE PAGE
  ========================= */

  .contribute-hero {
    background: #101812;
    border-color: var(--line);
  }

  .contribute-hero h1 span {
    color: var(--green);
  }

  .contribute-hero p,
  .contribute-hero-note span {
    color: var(--muted);
  }

  .contribute-hero-note {
    border-color: var(--green);
  }

  .contribution-form,
  .form-section {
    border-color: var(--line);
  }

  .form-section legend,
  .form-field label {
    color: var(--ink);
  }

  .form-section-description,
  .field-help,
  .optional {
    color: var(--muted);
  }

  .resource-type-option span {
    background: var(--paper);
    border-color: var(--line);
  }

  .resource-type-option small {
    color: var(--muted);
  }

  .resource-type-option input:checked + span {
    background: #13271b;
    border-color: var(--green);
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
  }

  .form-field input::placeholder,
  .form-field textarea::placeholder {
    color: var(--muted);
  }

  .contribution-upload {
    background: #111a14;
    border-color: #53645a;
  }

  .contribution-upload.drag-active {
    background: #13271b;
    border-color: var(--green);
  }

  .contribution-upload-inner span,
  .contribution-upload-inner small {
    color: var(--muted);
  }

  .selected-contribution-file {
    background: var(--paper);
    border-color: var(--line);
  }


  /* =========================
     FOOTER
  ========================= */

  .footer {
    background: #07130d;
    color: #d5e6db;
  }

  /* Keep text legible on accent buttons and branded green sections. */
  .brand-mark,
  .header-search button,
  .menu-btn,
  .btn-green,
  .searchbox button,
  .search-page button,
  .tools-private-icon,
  .directory-arrow,
  .pdf-preview-download {
    color: var(--on-accent);
  }

  .btn-green:hover,
  .search-page button:hover,
  .directory-tool-row:hover .directory-arrow,
  .pdf-preview-download:hover {
    background: var(--green-2);
    color: var(--on-accent);
  }

  .hero,
  .department,
  .sug-hero {
    background-color: var(--brand-background);
  }

  .tools-problem-section {
    background: linear-gradient(135deg, var(--deep), var(--brand-background));
  }

  .btn-primary,
  .file-demo-icon {
    background: var(--paper);
    color: var(--green);
  }

  .searchbox,
  .searchbox input,
  .empty {
    background: var(--paper);
    color: var(--ink);
  }

  /* Contribution copy and status feedback missed by the original theme. */
  .credit-checkbox,
  .permission-checkbox,
  .contribution-submit-area p,
  .contribute-side-block li,
  .contribution-process-row p,
  .library-contribute-prompt p,
  .selected-contribution-file span {
    color: var(--muted);
  }

  .contribution-process-section { background: var(--surface-alt); }
  .contribution-process-row > span { color: var(--green); }
  .selected-contribution-file button { color: #ffb4ab; }
  .form-error, .admin-error { background: #351c1b; color: #ffb4ab; }

  /* Tools have their own stylesheet, so their surfaces need the same palette. */
  .tool-workspace,
  .tool-box,
  .tool-control select,
  .tool-control input[type="number"],
  .tool-control input[type="text"] {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
  }

  .tool-dropzone { background: var(--surface-alt); border-color: #53645a; }
  .tools-private-note,
  .directory-tool-row:hover,
  .directory-icon,
  .directory-tags span,
  .tool-upload-icon,
  .tool-file-badge,
  .tool-dropzone.drag-active,
  .tool-option input:checked + .tool-option-box,
  .tool-result {
    background: var(--green-3);
    border-color: var(--line);
  }

  .directory-number { color: #6b9d7d; }
  .tool-drop-hint, .tool-input-hint { color: var(--muted); }
  .tools-ad { background: var(--surface-alt); color: var(--muted); border-color: var(--line); }

  /* Student union cards and sections must not stay white or vivid green. */
  .sug-introduction, .sug-arm, .sug-arm-arm-alt { background: var(--cream); }
  .sug-arm-alt { background: var(--surface-alt); }
  .person-card { background: var(--paper); border-color: var(--line); }
  .person-image { background: var(--surface-alt); }
  .sug-intro-grid > p, .arm-heading > p, .person-details p { color: var(--muted); }

  /* The reader chrome follows the device; the PDF itself retains its colors. */
  .pdf-preview-body { background: #0b100d; }
  .library-preview:hover { background: #203e2b; }

  /* The administrative pages also share the device preference. */
  .admin-header { background: var(--paper); border-color: var(--line); }
  .admin-field input,
  .toolbar select,
  .action-button {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--line);
  }
  .admin-brand a, .admin-label, .page-kicker, .submission-code, .preview-button { color: var(--green); }
  .admin-brand span, .admin-user, .admin-intro, .admin-back a,
  .page-header p, .stat-label, .submission-meta, .detail-label, .state-message { color: var(--muted); }
  .status-pending { background: #332d14; color: #f1d36b; }
  .status-approved { background: var(--green-3); color: var(--green); }
  .status-rejected { background: #351c1b; color: #ffb4ab; }
  .reject-button, .delete-button { color: #ffb4ab; border-color: #86534e; }
  .action-button:hover { background: var(--surface-alt); }
  .approve-button { background: #176b3a; color: #fff; }
  .approve-button:hover { background: #10522c; }
  .delete-button:hover { background: #9f2d2d; color: #fff; }
}

/* Keep browser auto-darkening from inverting document pixels. */
.pdf-preview canvas { color-scheme: only light; }