/* Named family palettes. Burton is the FOUC-safe default on :root.
   Add html[data-brand="rabun"] (and tallulah) blocks later; do not replace :root. */

:root,
:root[data-theme="light"],
html[data-brand="burton"],
html[data-brand="burton"][data-theme="light"] {
  --color-bg: #fbfcfd;
  --color-surface: #f4f8fb;
  --color-fg: #14283a;
  --color-muted: #4f6778;
  --color-border: #d7e8f2;
  --color-accent: #2a5f7d;
  --color-accent-contrast: #f7fbfe;
  --shadow-color: 16 40 63;
  --color-code-bg: #e8f0f6;
  --color-code-fg: #14283a;
  --color-pre-bg: #eef4f8;
  --color-pre-fg: #14283a;
}

@media (prefers-color-scheme: dark) {
  :root,
  html[data-brand="burton"] {
    --color-bg: #071018;
    --color-surface: #0e1c2c;
    --color-fg: #e8eef3;
    --color-muted: #8aa0b0;
    --color-border: #1a3348;
    --color-accent: #8ec4e0;
    --color-accent-contrast: #071018;
    --shadow-color: 0 0 0;
    --color-code-bg: #0e1c2c;
    --color-code-fg: #e8eef3;
    --color-pre-bg: #050b12;
    --color-pre-fg: #e8eef3;
  }
}

:root[data-theme="dark"],
html[data-brand="burton"][data-theme="dark"] {
  --color-bg: #071018;
  --color-surface: #0e1c2c;
  --color-fg: #e8eef3;
  --color-muted: #8aa0b0;
  --color-border: #1a3348;
  --color-accent: #8ec4e0;
  --color-accent-contrast: #071018;
  --shadow-color: 0 0 0;
  --color-code-bg: #0e1c2c;
  --color-code-fg: #e8eef3;
  --color-pre-bg: #050b12;
  --color-pre-fg: #e8eef3;
}

.home-page .app-catalog {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: calc(var(--space-10) * -1);
  padding-bottom: var(--space-16);
}

.app-catalog-empty {
  margin: 0;
  color: var(--color-muted);
}

.app-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(42rem, 100%);
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(var(--space-5), 3vw, var(--space-8));
  align-items: start;
  padding: clamp(var(--space-6), 3vw, var(--space-8));
  border-radius: calc(var(--radius-lg) + var(--space-1));
  background: linear-gradient(
    145deg,
    var(--color-surface-raised),
    var(--color-surface-subtle)
  );
  box-shadow:
    inset 0 0 0 1px var(--color-border),
    var(--shadow-md);
}

:root[data-theme="dark"] .app-card,
html[data-brand="burton"][data-theme="dark"] .app-card {
  background: linear-gradient(165deg, #0c1a2a 0%, #08131f 100%);
  box-shadow: inset 0 0 0 1px #1e3a52;
}

.app-card-mark {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  overflow: hidden;
  background: #0d1a28;
  box-shadow: inset 0 0 0 1px var(--color-border);
}

:root[data-theme="light"] .app-card-mark,
html[data-brand="burton"][data-theme="light"] .app-card-mark {
  background: #16324f;
}

.app-card-mark img {
  display: block;
  width: 100%;
  height: 100%;
}

.app-card-kicker {
  margin: 0 0 var(--space-2);
  color: var(--color-accent);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.app-card-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.app-card-description {
  margin: 0 0 var(--space-5);
  max-width: 42ch;
  color: var(--color-muted);
  line-height: var(--leading-body);
}

.app-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (max-width: 640px) {
  .home-page .app-catalog {
    margin-top: var(--space-8);
  }

  .app-card {
    grid-template-columns: 1fr;
  }
}