/* Semantic application palette. Media overlays deliberately stay contrast-stable in both themes. */
:root {
  color-scheme: dark;
  --type-title: 1.1765rem; /* 20px at the default 17px root; scales with user text */
  --type-body: .8824rem;
  --type-caption: .7647rem;
  --type-secondary: .8235rem;
  --type-small: .7059rem;
  --type-action: max(16px, .9412rem);
  --type-nav: 1rem;
  --radius-control: 12px;
  --radius-card: 16px;
  --radius-sheet: 22px;
  --bg: #0d0e10;
  --surface: #191a1e;
  --surface-1: #191a1e;
  --surface-2: #26272c;
  --text: #f5f5f7;
  --text-2: #bec0c7;
  --text-3: #a1a4ae;
  --line: #ffffff12;
  --line-strong: #ffffff2b;
  --accent: #0876b9;
  --link: #80c9ff;
  --accent-2: #38bcea;
  --accent-deep: #1e6fd0;
  --accent-grad: var(--accent);
  --accent-glow: 0 4px 16px #0000001f;
  --accent-ink: #ffffff;
  --like: #ff3b5c;
  --warn: #ebc773;
  --danger: #ff949e;
  --success: #86d6ad;
  --success-bg: #86d6ad18;
  --info-bg: #80c9ff18;
  --danger-bg: #ff949e14;
  --glass: #242529ee;
  --glass-solid: #242529;
  --glass-blur: blur(20px) saturate(135%);
  --shadow: 0 8px 32px #00000033;
  --scrim: #00000088;
  --scrim-strong: #000000dc;
  --selected: #ffffff20;
  --hover: #ffffff0c;
  --media-text: #ffffff;
  --media-muted: #c9d2dc;
  --media-glass: #101c28b8;
  --media-surface: #202a36;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f5f7;
  --surface: #ffffff;
  --surface-1: #ffffff;
  --surface-2: #e9eaee;
  --text: #1b1c20;
  --text-2: #50545e;
  --text-3: #626772;
  --line: #1b1c2014;
  --line-strong: #1b1c2033;
  --accent: #076cab;
  --link: #076cab;
  --warn: #855600;
  --danger: #b82e43;
  --success: #216d48;
  --success-bg: #216d4810;
  --info-bg: #076cab10;
  --danger-bg: #b82e4310;
  --glass: #ffffffed;
  --glass-solid: #ffffff;
  --shadow: 0 8px 32px #141a2414;
  --scrim: #15182066;
  --scrim-strong: #151820b8;
  --selected: #ffffff;
  --hover: #1b1c2008;
}
/* The preference is device-local and available before authentication. */
.appearance-setting { padding: 8px 14px; border-top: 1px solid var(--line); }
.appearance-setting > span { display: block; margin-bottom: 6px; font-size: var(--type-caption); }
.appearance-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.appearance-options button { min-width: 0; min-height: 44px; padding: 7px 4px; border: 0; border-radius: 9px; font: inherit; font-size: var(--type-caption); line-height: 1.25; color: var(--text-2); background: transparent; overflow-wrap: anywhere; }
.appearance-options button[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.appearance-options button:focus-visible { box-shadow: inset 0 0 0 2px var(--link); }
.auth-appearance { margin-top: 18px; padding: 12px 0 0; }
@media (prefers-reduced-transparency: reduce) { :root { --glass: var(--glass-solid); --glass-blur: none; } }

/* UI logos follow the application theme, not the SVG document/system theme. */
html[data-theme="light"] :is(img.mark, img.home-brand) { content: url("../img/mark-light.svg"); }