/* Clair par défaut. La préférence système s'applique dès le premier affichage
   et se met à jour sans JavaScript ni rechargement. */
:root {
  color-scheme: light;
  --text: #24382d;
  --text2: #65736a;
  --go: #286449;
  --sheet-bg: #f5f7f5;
  --field: #f3f6f3;
  --hair: #dfe7e1;
  --lime: #ddf6a2;
  --surface: #ffffff;
  --radius: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --text: #edf3ed;
    --text2: #a8b6ac;
    --go: #add4b7;
    --sheet-bg: #101713;
    --field: #202d25;
    --hair: #34453a;
    --lime: #d9edb0;
    --surface: #18221c;
  }

  .top {
    outline: 1px solid var(--hair);
    outline-offset: -1px;
    box-shadow: 0 12px 36px -24px #000000b3;
  }

  .sheet,
  .share-panel {
    border-color: var(--hair);
    background: var(--surface);
    box-shadow: 0 18px 48px -24px #00000099;
  }

  .share-mark,
  .cnt,
  .rowedit,
  .arrived {
    color: #c1dec7;
    background: #293c2e;
  }

  .loc:hover,
  .loc[aria-expanded="true"] {
    background: #2a3b2f;
  }

  ul#list li,
  .plan-trigger,
  .plan-form input,
  .plan-form select {
    border-color: var(--hair);
    background: #1d2921;
  }

  ul#list li.me {
    background: #253b2a;
    border-color: #49634c;
  }

  ul#list .empty {
    background: var(--surface);
    border-color: var(--hair);
  }

  .empty-title,
  .plan-trigger { color: #c1dec7; }
  .empty::before { color: #93b28e; }

  .pill input::placeholder,
  .rowinput::placeholder,
  .plan-form input::placeholder { color: var(--text2); opacity: 1; }

  .plan-form,
  .rowinput,
  .dur { background: var(--field); }

  .chip,
  .share-close {
    color: #142c1b;
    background: var(--go);
  }

  .planned-time,
  .share-panel .share-link { color: #a9cadf; }

  .notify,
  .planned,
  ul#plannedList li + li { border-color: var(--hair); }

  .share-backdrop { background: #050b08a6; }

  /* Le QR code conserve son fond blanc pour rester facile à scanner. */
  .share-qr { color-scheme: light; background: #ffffff; }

  .banner {
    color: #ffd2cc;
    background: #3a2422f2;
    border-color: #79504a;
    box-shadow: 0 14px 34px -14px #000000b3;
  }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  .share-close:focus-visible { outline-color: #add4b7; }
  .checkin:focus-visible { outline-color: #ffffff; }
}