:root {
  --pl-color-primary: #2d4059;
  --pl-color-primary-dark: #223143;
  --pl-color-accent: #f07b3f;
  --pl-color-accent-dark: #d96a34;
  --pl-color-warning: #ffd460;
  --pl-color-warning-dark: #e6bb52;
  --pl-color-success: var(--pl-color-accent);
  --pl-color-success-dark: var(--pl-color-accent-dark);
  --pl-color-positive: #2f9d62;
  --pl-positive-tint: rgba(47, 157, 98, 0.16);
  --pl-positive-tint-strong: rgba(47, 157, 98, 0.22);
  --pl-positive-border: rgba(47, 157, 98, 0.54);
  --pl-color-danger: #ea5455;
  --pl-color-danger-dark: #d13e3e;
  --pl-danger-tint: rgba(234, 84, 85, 0.16);
  --pl-danger-tint-strong: rgba(234, 84, 85, 0.22);
  --pl-danger-border: rgba(234, 84, 85, 0.52);
  --pl-color-surface: #fffaf3;
  --pl-surface-card: #ffffff;
  --pl-surface-muted: #fff7eb;
  --pl-ink-strong: #1b2433;
  --pl-surface-contrast: #1f2b3d;
  --pl-surface-contrast-strong: #162033;
  --pl-color-text: #2b2b2b;
  --pl-color-dark: #2b2b2b;
  --pl-color-dark-darker: #1e1e1e;
  --pl-color-muted: #616a74;
  --pl-border-subtle: rgba(45, 64, 89, 0.14);
  --pl-border-strong: rgba(45, 64, 89, 0.24);
  --pl-shadow-soft: 0 10px 30px rgba(38, 70, 83, 0.08);
  --pl-shadow-strong: 0 20px 60px rgba(38, 70, 83, 0.14);
  --pl-primary-tint: rgba(45, 64, 89, 0.08);
  --pl-primary-tint-strong: rgba(45, 64, 89, 0.12);
  --pl-accent-tint: rgba(240, 123, 63, 0.18);
  --pl-accent-tint-strong: rgba(240, 123, 63, 0.24);
  --pl-accent-border: rgba(240, 123, 63, 0.48);
  --pl-accent-border-strong: rgba(240, 123, 63, 0.7);
  --pl-success-tint: var(--pl-accent-tint);
  --pl-text-muted-strong: rgba(43, 43, 43, 0.7);
  --pl-text-muted: rgba(43, 43, 43, 0.65);
  --pl-text-soft: rgba(45, 64, 89, 0.35);
  --pl-focus-ring: 0 0 0 3px rgba(45, 64, 89, 0.15);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --pl-color-primary: #2d4059;
  --pl-color-primary-dark: #223143;
  --pl-color-accent: #f07b3f;
  --pl-color-accent-dark: #d96a34;
  --pl-color-warning: #ffd460;
  --pl-color-warning-dark: #e6bb52;
  --pl-color-success: var(--pl-color-accent);
  --pl-color-success-dark: var(--pl-color-accent-dark);
  --pl-color-positive: #4dd18f;
  --pl-positive-tint: rgba(77, 209, 143, 0.2);
  --pl-positive-tint-strong: rgba(77, 209, 143, 0.28);
  --pl-positive-border: rgba(77, 209, 143, 0.6);
  --pl-color-danger: #ff7b82;
  --pl-color-danger-dark: #e85b62;
  --pl-danger-tint: rgba(255, 123, 130, 0.2);
  --pl-danger-tint-strong: rgba(255, 123, 130, 0.28);
  --pl-danger-border: rgba(255, 123, 130, 0.65);
  --pl-color-surface: #0f1724;
  --pl-surface-card: #172338;
  --pl-surface-muted: #1f2c43;
  --pl-ink-strong: #0f1724;
  --pl-surface-contrast: #0d1422;
  --pl-surface-contrast-strong: #0a101b;
  --pl-color-text: #e7edf7;
  --pl-color-dark: #e7edf7;
  --pl-color-dark-darker: #f7f9fb;
  --pl-color-muted: #b6c4d8;
  --pl-border-subtle: rgba(255, 255, 255, 0.12);
  --pl-border-strong: rgba(255, 255, 255, 0.22);
  --pl-shadow-soft: 0 16px 40px rgba(0, 0, 0, 0.42);
  --pl-shadow-strong: 0 24px 60px rgba(0, 0, 0, 0.6);
  --pl-primary-tint: rgba(158, 184, 255, 0.12);
  --pl-primary-tint-strong: rgba(158, 184, 255, 0.18);
  --pl-accent-tint: rgba(240, 123, 63, 0.22);
  --pl-accent-tint-strong: rgba(240, 123, 63, 0.32);
  --pl-accent-border: rgba(240, 123, 63, 0.55);
  --pl-accent-border-strong: rgba(240, 123, 63, 0.75);
  --pl-success-tint: var(--pl-accent-tint);
  --pl-text-muted-strong: rgba(231, 237, 247, 0.82);
  --pl-text-muted: rgba(231, 237, 247, 0.7);
  --pl-text-soft: rgba(231, 237, 247, 0.52);
  --pl-focus-ring: 0 0 0 3px rgba(158, 184, 255, 0.32);
}

body {
  background-color: var(--pl-color-surface);
  color: var(--pl-color-text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  transition: background-color 0.25s ease, color 0.25s ease;
}

.bg-light {
  background-color: var(--pl-color-surface) !important;
}

::selection {
  background-color: var(--pl-accent-tint-strong);
  color: var(--pl-ink-strong);
}

a {
  color: var(--pl-color-primary);
}

a:hover {
  color: var(--pl-color-primary-dark);
}

.card {
  background-color: var(--pl-surface-card);
  color: var(--pl-color-text);
  border: 1px solid var(--pl-border-subtle);
  box-shadow: var(--pl-shadow-soft);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

.text-muted {
  color: var(--pl-text-muted) !important;
}

.text-dark {
  color: var(--pl-color-text) !important;
}

.form-select {
  background-color: var(--pl-surface-card);
  color: var(--pl-color-text);
  border-color: var(--pl-border-subtle);
  box-shadow: none;
}

.form-select:focus {
  border-color: var(--pl-color-primary);
  box-shadow: var(--pl-focus-ring);
}

/* small helpers used by homepage */
.h2 {
  font-size: 1.5rem;
}

/* === App cards (homepage) === */
.app-card {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  border: 1px solid var(--pl-border-subtle);
}

.app-card:hover {
  background-color: var(--pl-primary-tint);
  box-shadow: var(--pl-shadow-strong);
  border-color: var(--pl-border-strong);
}

.app-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

/* Optional: subtle border accent on hover */
.app-card:hover .app-icon {
  filter: brightness(1.05);
}

/* === Layout sections === */
.section-logo {
  padding-top: 6vh;
}

.section-description {
  margin-bottom: 1vh;
}

.section-apps {
  padding-top: 6vh;
}

.section-theme {
  padding-top: 5vh;
}

.petitlab-logo {
  height: 200px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(45, 64, 89, 0.14);
}

.pl-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.9rem;
  border-radius: 0.75em;
  border: 1px solid var(--pl-border-subtle);
  background: var(--pl-surface-card);
  color: var(--pl-color-text);
  box-shadow: var(--pl-shadow-soft);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.12s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.pl-theme-toggle:hover,
.pl-theme-toggle:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--pl-shadow-strong);
  border-color: var(--pl-border-strong);
  background: var(--pl-surface-muted);
}

.pl-theme-toggle:focus-visible {
  outline: none;
  box-shadow: var(--pl-shadow-strong), var(--pl-focus-ring);
}

.pl-theme-toggle-icon {
  font-size: 1.1rem;
  line-height: 1;
}

.pl-theme-toggle-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 0.05rem;
}

.pl-theme-toggle-label {
  font-size: 0.75rem;
  color: var(--pl-text-muted);
}

.pl-theme-toggle-mode {
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .d-flex.align-items-center.mb-4 {
    justify-content: center !important;
  }
}

@media (max-width: 576px) {
  .pl-theme-toggle {
    padding-inline: 0.65rem;
  }

  .pl-theme-toggle-text {
    display: none;
  }
}