/*
 * Red Hat brand colors — sourced from:
 * https://www.redhat.com/en/about/brand/standards/color
 * https://red-hat-design-tokens.netlify.app/
 */

:root,
html[data-theme-mode="light"] {
  color-scheme: light;

  --rh-brand-red: #ee0000;
  --rh-brand-red-hover: #cc0000;
  --rh-brand-red-on-dark: #ff442b;

  --rh-canvas: #ffffff;
  --rh-surface: #f2f2f2;
  --rh-surface-raised: #ffffff;
  --rh-surface-sunken: #e0e0e0;
  --rh-surface-hover: #e8e8e8;

  --rh-text: #151515;
  --rh-text-heading: #151515;
  --rh-text-muted: #707070;
  --rh-text-subtle: #4d4d4d;
  --rh-text-faint: #8c8c8c;
  --rh-text-emphasis: #1f1f1f;

  --rh-border: #e0e0e0;
  --rh-border-strong: #c7c7c7;

  --rh-link: #0066cc;
  --rh-link-hover: #003366;
  --rh-link-accent: #ee0000;
  --rh-link-accent-hover: #cc0000;

  --rh-btn-primary-bg: #ee0000;
  --rh-btn-primary-hover: #cc0000;
  --rh-btn-primary-text: #ffffff;

  --rh-success-bg: #e9f7df;
  --rh-success-border: #3d7317;
  --rh-success-text: #1e4f10;
  --rh-success-solid: #3d7317;
  --rh-success-solid-hover: #2f5c11;

  --rh-danger-bg: #ffe3d9;
  --rh-danger-border: #a30000;
  --rh-danger-text: #7d1007;

  --rh-cell-expired: #a30000;
  --rh-cell-muted: #707070;
  --rh-cell-subtle: #4d4d4d;
  --rh-cell-active: #151515;

  --rh-header-bg: rgba(255, 255, 255, 0.92);
  --rh-shadow: 0 1px 2px rgba(21, 21, 21, 0.06);
}

html[data-theme-mode="dark"] {
  color-scheme: dark;

  --rh-brand-red: #ee0000;
  --rh-brand-red-hover: #ff5540;
  --rh-brand-red-on-dark: #ff442b;

  --rh-canvas: #151515;
  --rh-surface: #1f1f1f;
  --rh-surface-raised: #383838;
  --rh-surface-sunken: #151515;
  --rh-surface-hover: #2a2a2a;

  --rh-text: #f2f2f2;
  --rh-text-heading: #ffffff;
  --rh-text-muted: #a3a3a3;
  --rh-text-subtle: #c7c7c7;
  --rh-text-faint: #8c8c8c;
  --rh-text-emphasis: #ffffff;

  --rh-border: #383838;
  --rh-border-strong: #4d4d4d;

  --rh-link: #92c5f9;
  --rh-link-hover: #b9dafc;
  --rh-link-accent: #ff442b;
  --rh-link-accent-hover: #ff6a55;

  --rh-btn-primary-bg: #ee0000;
  --rh-btn-primary-hover: #ff5540;
  --rh-btn-primary-text: #ffffff;

  --rh-success-bg: rgba(61, 115, 23, 0.25);
  --rh-success-border: #3d7317;
  --rh-success-text: #b6d99a;
  --rh-success-solid: #3d7317;
  --rh-success-solid-hover: #4d8a1f;

  --rh-danger-bg: rgba(163, 0, 0, 0.2);
  --rh-danger-border: #a30000;
  --rh-danger-text: #ffb4a6;

  --rh-cell-expired: #ff6a55;
  --rh-cell-muted: #a3a3a3;
  --rh-cell-subtle: #c7c7c7;
  --rh-cell-active: #ffffff;

  --rh-header-bg: rgba(31, 31, 31, 0.92);
  --rh-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  html[data-theme-mode="system"] {
    color-scheme: light;
    --rh-brand-red: #ee0000;
    --rh-brand-red-hover: #cc0000;
    --rh-brand-red-on-dark: #ff442b;
    --rh-canvas: #ffffff;
    --rh-surface: #f2f2f2;
    --rh-surface-raised: #ffffff;
    --rh-surface-sunken: #e0e0e0;
    --rh-surface-hover: #e8e8e8;
    --rh-text: #151515;
    --rh-text-heading: #151515;
    --rh-text-muted: #707070;
    --rh-text-subtle: #4d4d4d;
    --rh-text-faint: #8c8c8c;
    --rh-text-emphasis: #1f1f1f;
    --rh-border: #e0e0e0;
    --rh-border-strong: #c7c7c7;
    --rh-link: #0066cc;
    --rh-link-hover: #003366;
    --rh-link-accent: #ee0000;
    --rh-link-accent-hover: #cc0000;
    --rh-btn-primary-bg: #ee0000;
    --rh-btn-primary-hover: #cc0000;
    --rh-btn-primary-text: #ffffff;
    --rh-success-bg: #e9f7df;
    --rh-success-border: #3d7317;
    --rh-success-text: #1e4f10;
    --rh-success-solid: #3d7317;
    --rh-success-solid-hover: #2f5c11;
    --rh-danger-bg: #ffe3d9;
    --rh-danger-border: #a30000;
    --rh-danger-text: #7d1007;
    --rh-cell-expired: #a30000;
    --rh-cell-muted: #707070;
    --rh-cell-subtle: #4d4d4d;
    --rh-cell-active: #151515;
    --rh-header-bg: rgba(255, 255, 255, 0.92);
    --rh-shadow: 0 1px 2px rgba(21, 21, 21, 0.06);
  }
}

@media (prefers-color-scheme: dark) {
  html[data-theme-mode="system"] {
    color-scheme: dark;
    --rh-brand-red: #ee0000;
    --rh-brand-red-hover: #ff5540;
    --rh-brand-red-on-dark: #ff442b;
    --rh-canvas: #151515;
    --rh-surface: #1f1f1f;
    --rh-surface-raised: #383838;
    --rh-surface-sunken: #151515;
    --rh-surface-hover: #2a2a2a;
    --rh-text: #f2f2f2;
    --rh-text-heading: #ffffff;
    --rh-text-muted: #a3a3a3;
    --rh-text-subtle: #c7c7c7;
    --rh-text-faint: #8c8c8c;
    --rh-text-emphasis: #ffffff;
    --rh-border: #383838;
    --rh-border-strong: #4d4d4d;
    --rh-link: #92c5f9;
    --rh-link-hover: #b9dafc;
    --rh-link-accent: #ff442b;
    --rh-link-accent-hover: #ff6a55;
    --rh-btn-primary-bg: #ee0000;
    --rh-btn-primary-hover: #ff5540;
    --rh-btn-primary-text: #ffffff;
    --rh-success-bg: rgba(61, 115, 23, 0.25);
    --rh-success-border: #3d7317;
    --rh-success-text: #b6d99a;
    --rh-success-solid: #3d7317;
    --rh-success-solid-hover: #4d8a1f;
    --rh-danger-bg: rgba(163, 0, 0, 0.2);
    --rh-danger-border: #a30000;
    --rh-danger-text: #ffb4a6;
    --rh-cell-expired: #ff6a55;
    --rh-cell-muted: #a3a3a3;
    --rh-cell-subtle: #c7c7c7;
    --rh-cell-active: #ffffff;
    --rh-header-bg: rgba(31, 31, 31, 0.92);
    --rh-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  }
}

body.rh-body {
  background: var(--rh-canvas);
  color: var(--rh-text);
  font-family: "Red Hat Text", "Overpass", system-ui, sans-serif;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.rh-brand-bar {
  height: 4px;
  background: var(--rh-brand-red);
}

.rh-header {
  border-bottom: 1px solid var(--rh-border);
  background: var(--rh-header-bg);
  backdrop-filter: blur(8px);
  box-shadow: var(--rh-shadow);
}

.rh-logo {
  font-family: "Red Hat Display", "Red Hat Text", system-ui, sans-serif;
  font-weight: 700;
  color: var(--rh-text-heading);
}

.rh-logo:hover {
  color: var(--rh-brand-red);
}

.rh-tagline {
  color: var(--rh-text-muted);
}

.rh-nav-link {
  color: var(--rh-text-subtle);
}

.rh-nav-link:hover {
  color: var(--rh-text-heading);
}

.rh-link-accent {
  color: var(--rh-link-accent);
}

.rh-link-accent:hover {
  color: var(--rh-link-accent-hover);
  text-decoration: underline;
}

.rh-footer {
  border-top: 1px solid var(--rh-border);
  color: var(--rh-text-faint);
}

.rh-footer a {
  color: var(--rh-link-accent);
}

.rh-footer a:hover {
  color: var(--rh-link-accent-hover);
  text-decoration: underline;
}

.rh-panel {
  border: 1px solid var(--rh-border);
  background: color-mix(in srgb, var(--rh-surface) 88%, transparent);
  border-radius: 0.75rem;
}

.rh-panel-soft {
  border: 1px solid var(--rh-border);
  background: color-mix(in srgb, var(--rh-surface) 70%, transparent);
  border-radius: 0.5rem;
}

.rh-panel-nested {
  border: 1px solid var(--rh-border);
  background: var(--rh-surface-sunken);
  border-radius: 0.5rem;
}

.rh-card-stat {
  border: 1px solid var(--rh-border);
  background: color-mix(in srgb, var(--rh-surface) 88%, transparent);
  border-radius: 0.75rem;
}

.rh-heading {
  color: var(--rh-text-heading);
}

.rh-muted {
  color: var(--rh-text-muted);
}

.rh-subtle {
  color: var(--rh-text-subtle);
}

.rh-faint {
  color: var(--rh-text-faint);
}

.rh-emphasis {
  color: var(--rh-text-emphasis);
}

.rh-border {
  border-color: var(--rh-border);
}

.rh-border-strong {
  border-color: var(--rh-border-strong);
}

.rh-input,
.rh-select {
  border: 1px solid var(--rh-border-strong);
  background: var(--rh-surface-sunken);
  color: var(--rh-text);
  border-radius: 0.375rem;
}

.rh-input:focus,
.rh-select:focus {
  outline: 2px solid var(--rh-link);
  outline-offset: 1px;
}

.rh-btn-primary {
  background: var(--rh-btn-primary-bg);
  color: var(--rh-btn-primary-text);
  border-radius: 0.375rem;
  font-weight: 500;
}

.rh-btn-primary:hover {
  background: var(--rh-btn-primary-hover);
}

.rh-btn-secondary {
  border: 1px solid var(--rh-border-strong);
  color: var(--rh-text-subtle);
  border-radius: 0.375rem;
}

.rh-btn-secondary:hover {
  background: var(--rh-surface-hover);
  color: var(--rh-text-heading);
}

.rh-btn-success {
  background: var(--rh-success-solid);
  color: #ffffff;
  border-radius: 0.375rem;
}

.rh-btn-success:hover {
  background: var(--rh-success-solid-hover);
}

.rh-table-wrap {
  border: 1px solid var(--rh-border);
  border-radius: 0.75rem;
  overflow-x: auto;
}

.rh-table thead {
  background: var(--rh-surface);
  color: var(--rh-text-subtle);
}

.rh-table tbody tr {
  border-top: 1px solid var(--rh-border);
}

.rh-table tbody tr:hover {
  background: color-mix(in srgb, var(--rh-surface) 55%, transparent);
}

.rh-row-future {
  background: color-mix(in srgb, var(--rh-surface) 45%, transparent);
  color: var(--rh-text-muted);
}

.rh-badge-success {
  background: var(--rh-success-bg);
  color: var(--rh-success-text);
  border: 1px solid var(--rh-success-border);
  border-radius: 9999px;
}

.rh-badge-neutral {
  background: var(--rh-surface);
  color: var(--rh-text-subtle);
  border: 1px solid var(--rh-border);
  border-radius: 9999px;
}

.rh-badge-muted {
  background: var(--rh-surface);
  color: var(--rh-text-muted);
  border: 1px solid var(--rh-border);
  border-radius: 9999px;
}

.rh-badge-warning {
  background: #fff4cc;
  color: #73480b;
  border: 1px solid #f0ab00;
  border-radius: 9999px;
}

html[data-theme-mode="dark"] .rh-badge-warning {
  background: rgba(115, 72, 11, 0.35);
  color: #fff4cc;
  border-color: #f0ab00;
}

@media (prefers-color-scheme: dark) {
  html[data-theme-mode="system"] .rh-badge-warning {
    background: rgba(115, 72, 11, 0.35);
    color: #fff4cc;
    border-color: #f0ab00;
  }
}

.rh-alert-success {
  border: 1px solid var(--rh-success-border);
  background: var(--rh-success-bg);
  color: var(--rh-success-text);
  border-radius: 0.375rem;
}

.rh-alert-error {
  border: 1px solid var(--rh-danger-border);
  background: var(--rh-danger-bg);
  color: var(--rh-danger-text);
  border-radius: 0.375rem;
}

.rh-cell-muted {
  color: var(--rh-cell-muted);
}

.rh-cell-subtle {
  color: var(--rh-cell-subtle);
}

.rh-cell-active {
  color: var(--rh-cell-active);
}

.rh-cell-expired {
  color: var(--rh-cell-expired);
}

.rh-theme-switch {
  display: inline-flex;
  border: 1px solid var(--rh-border-strong);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--rh-surface-sunken);
}

.rh-theme-switch button {
  padding: 0.35rem 0.55rem;
  font-size: 0.75rem;
  line-height: 1;
  color: var(--rh-text-muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--rh-border);
  cursor: pointer;
}

.rh-theme-switch button:last-child {
  border-right: none;
}

.rh-theme-switch button:hover {
  color: var(--rh-text-heading);
  background: var(--rh-surface-hover);
}

.rh-theme-switch button[aria-pressed="true"] {
  color: var(--rh-btn-primary-text);
  background: var(--rh-brand-red);
  font-weight: 600;
}

.rh-theme-switch button:focus-visible {
  outline: 2px solid var(--rh-link);
  outline-offset: -2px;
}