/* Shared light/dark palette. Keep text, surfaces and filled controls independent. */
:root {
  color-scheme: light;
  --ink-soft: #706859;
  --accent: #895B20;
  --send: #A65F24;
  --action: #221F1A;
  --on-action: #FFFFFF;
  --accent-fill: #895B20;
  --page: #E8E8E3;
  --picker-bg: #FFFFFF;
  --picker-ink: #221F1A;
  --picker-border: #DBDBD3;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171512;
  --surface: #211E1A;
  --surface-soft: #2B2722;
  --border: #3B352E;
  --border-soft: #51483E;
  --ink: #F3EFE7;
  --ink-soft: #B9AE9D;
  --accent: #E9A94F;
  --accent-bg: #3C2D1B;
  --send: #A65F24;
  --maya: #D9A6BF;
  --sam: #A8C69B;
  --action: #4A4136;
  --accent-fill: #895B20;
  --page: #100F0D;
  --picker-bg: #211E1A;
  --picker-ink: #F3EFE7;
  --picker-border: #51483E;
  --shadow: 0 1px 2px #0004, 0 10px 24px -14px #0009;
}
body { background: var(--page); }
theme-picker { display: block; font: 13px/1.5 system-ui, sans-serif; color: var(--picker-ink); }
theme-picker label { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
theme-picker select {
  min-height: 44px; max-width: 100%; padding: 8px 30px 8px 12px;
  font: inherit; color: var(--picker-ink); background: var(--picker-bg);
  border: 1px solid var(--picker-border); border-radius: 10px; cursor: pointer;
}
theme-picker select:focus-visible { outline: 2px solid var(--accent, var(--ocre)); outline-offset: 3px; }
.login-screen theme-picker { position: absolute; top: max(20px, env(safe-area-inset-top)); right: 20px; left: 20px; }
.login-screen theme-picker label { justify-content: flex-end; }
.account-card theme-picker { margin: 16px 0; }
.theme-toolbar { display: flex; justify-content: flex-end; max-width: 1180px; margin: auto; padding: 16px var(--pad, 20px) 0; }

/* Presentation uses the same warm neutral palette as the app. */
:root[data-theme="light"] {
  --nuit: #F7F7F4;
  --nuit-2: #EFEFEA;
  --carte: #FFFFFF;
  --carte-2: #E8E5DF;
  --trait: rgba(34,31,26,.13);
  --trait-fort: rgba(34,31,26,.28);
  --craie: #221F1A;
  --craie-2: #655B4D;
  --craie-3: #736755;
  --ocre: #895B20;
  --ocre-sourd: #895B20;
  --brique: #AD352B;
  --mousse: #49673E;
}
:root[data-theme="light"] .bouton:not(.creux),
:root[data-theme="light"] .d-j[aria-pressed="true"],
:root[data-theme="light"] .d-o[aria-pressed="true"] { color: #FFFFFF; }
:root[data-theme="dark"] { --craie-3: #A79A88; }

/* Fixed light surfaces in the legacy app styles. Media and branded icons stay intact. */
:root[data-theme="dark"] .bottom-nav { background: rgba(33,30,26,.96); }
:root[data-theme="dark"] .rrow:nth-child(odd),
:root[data-theme="dark"] .rrow-wrap,
:root[data-theme="dark"] .note-panel:not(.sur-sombre) { background: var(--surface); }
:root[data-theme="dark"] .rrow:nth-child(even),
:root[data-theme="dark"] .rrow-wrap.alt { background: var(--surface-soft); }
:root[data-theme="dark"] .rrow .icon-badge,
:root[data-theme="dark"] .rrow .rresolve { background: var(--bg); border-color: var(--border-soft); }
:root[data-theme="dark"] .google-btn { background: var(--surface); color: var(--ink); border-color: var(--border-soft); }
:root[data-theme="dark"] .google-btn:hover { background: var(--surface-soft); }
:root[data-theme="dark"] .gcal-connect.connected { background: #263323; color: #BDD5B2; }
:root[data-theme="dark"] .cat-provenance.ici,
:root[data-theme="dark"] .dash-card.ton-bon .dash-card-value { color: #A8C69B; }
:root[data-theme="dark"] .cat-provenance.vient { color: #E9A94F; }
:root[data-theme="dark"] #agendaCards,
:root[data-theme="dark"] #calAgenda,
:root[data-theme="dark"] #remindersList { scrollbar-color: var(--border-soft) transparent; }

html[data-page="presentation"] body { background: var(--nuit); }

:root[data-theme="light"] .sigle svg [stroke] { stroke: var(--craie); }
:root[data-theme="light"] .sigle svg [fill]:not([fill="none"]) { fill: var(--ocre); }
:root[data-theme="dark"] .rrow .icon-badge svg { color: color-mix(in srgb, currentColor 50%, white); }
:root[data-theme="dark"] #urgentList { background: #A62A23; }
:root[data-theme="dark"] .urow:nth-child(odd) { background: #B72E25; }
:root[data-theme="dark"] .urow:nth-child(even) { background: #A62A23; }
:root[data-theme="dark"] .creation-champ.a-remplir { background: #39201D; border-color: #E48075; }