:root {
  --paper: #f6f4ef;
  --paper-dim: #efece3;
  --ink: #201f1d;
  --ink-soft: #6b675d;
  --line: #d9d3c4;
  --accent: #7a2e2e;
  --accent-soft: #7a2e2e14;
  /* Separate from --accent (brand/selection color) because .error and other
     genuinely-wrong-state text needs to stay legible as "something's wrong"
     even in a theme where --accent carries no color at all — see the Modern
     override below. */
  --danger: var(--accent);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --border-width: 1px;
  --radius-sm: 2px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  --plate-padding: 0.6em;
  --gap-grid: 1rem;
}

/* "Modern" — a second visual direction being compared against "Classic"
   above (see docs/plan.md's "Design system exploration" detour), in the
   International Typographic Style / Swiss design lineage. Sans-only, sharp
   corners, precise hairlines. Toggled via lib/settings.svelte.ts, not a
   settled decision. */
:root[data-theme="modern"] {
  --paper: #ffffff;
  --paper-dim: #eeeeee;
  --ink: #111111;
  --ink-soft: #6e6e6e;
  --line: #111111;
  --accent: var(--ink);
  --accent-soft: #11111114;
  --danger: #9c3b3b;
  --font-body: Helvetica, Arial, sans-serif;
  --font-label: Helvetica, Arial, sans-serif;
  --border-width: 1px;
  --radius-sm: 0;
  --radius-pill: 0;
  --radius-circle: 0;
  --plate-padding: 0.35em;
  --gap-grid: 1.25rem;
}

/* Labels lean on italics for contrast against body text in Classic's serif;
   Modern has no serif to contrast against, so it leans on tracked-out
   uppercase instead — the standard ITS caption treatment. */
:root[data-theme="modern"] .wall-label {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72em;
}

:root[data-theme="modern"] .wall-label .title {
  font-style: normal;
}

/* A modernist catalog page doesn't box every photo — alignment and
   whitespace carry the grid, not ruled frames around each cell. So Modern
   drops the matted box specifically on meme thumbnails (figure.plate in the
   grid views, .plate.pick in the picker) while leaving .plate.modal and
   .plate.card alone — those are bounded UI surfaces (a dialog, the sign-in
   card) that still need to read as distinct from what's behind them. */
:root[data-theme="modern"] figure.plate,
:root[data-theme="modern"] .plate.pick {
  background: none;
  border: none;
  padding: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body, #app {
  height: 100%;
  margin: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-label);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
}

button, input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  /* Browsers give <button>/<input>/<select> their own default line-height
     ("normal") instead of inheriting the page's — without this, a button
     sits shorter than a same-padding <label> styled to look like one (see
     .file-btn in ComposeView), even with identical border/padding. */
  line-height: inherit;
  color: inherit;
}

button {
  background: var(--paper);
  border: var(--border-width) solid var(--ink);
  color: var(--ink);
  padding: 0.5em 1.1em;
  cursor: pointer;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

button.accent {
  border-color: var(--accent);
  color: var(--accent);
}

@media (hover: hover) {
  button:hover {
    background: var(--ink);
    color: var(--paper);
  }

  button.accent:hover {
    background: var(--accent);
    color: var(--paper);
  }
}

button:disabled {
  opacity: 0.4;
  cursor: default;
  background: var(--paper);
  color: var(--ink);
}

input[type="text"],
input[type="search"],
textarea {
  background: var(--paper);
  border: var(--border-width) solid var(--line);
  padding: 0.5em 0.7em;
  border-radius: var(--radius-sm);
}

input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
  outline: none;
  border-color: var(--ink-soft);
}

a {
  color: var(--accent);
}

/* Wall-label: the small caption style used under every meme thumbnail. */
.wall-label {
  font-family: var(--font-label);
  font-size: 0.8em;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.wall-label .title {
  color: var(--ink);
  font-style: italic;
}

/* Plate: the matted frame around a meme thumbnail in a grid. */
.plate {
  background: var(--paper-dim);
  border: var(--border-width) solid var(--line);
  padding: var(--plate-padding);
}

.plate img,
.plate .meme-image {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
}

/* Icon-btn: the small round dark control that floats on top of a meme —
   edit/delete in the library grid, "view full size" everywhere a meme is
   shown. Global rather than per-component because four views now place one
   and they have to read as the same control in all of them. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  padding: 0;
  border: none;
  border-radius: var(--radius-circle);
  background: rgba(32, 31, 29, 0.65);
  color: var(--paper);
}

.icon-btn:hover {
  background: rgba(32, 31, 29, 0.85);
  color: var(--paper);
}

.icon-btn svg {
  width: 1.1em;
  height: 1.1em;
}