/*
  MyRyderOps — AFTx Light Baseline
  Design tokens only. No feature behavior.
  Intended for Pinegrow visual adjustments and controlled UAT promotion.
*/

:root {
  /* Neutral AFTx surfaces */
  --myops-page: #f2f3f4;
  --myops-surface: #ffffff;
  --myops-surface-soft: #f7f8f9;
  --myops-surface-muted: #eceff1;
  --myops-header: #171a1e;
  --myops-navigation: #20242a;
  --myops-navigation-active: #30353c;

  /* Text */
  --myops-text: #1c2227;
  --myops-text-secondary: #5f6972;
  --myops-text-muted: #828b94;
  --myops-text-inverse: #f5f7f8;

  /* Borders and dividers */
  --myops-border: #d8dde1;
  --myops-border-strong: #b9c0c6;
  --myops-divider: #e5e8ea;

  /* MyRyderOps accent — adjust these first in Pinegrow */
  --myops-accent: #d71920;
  --myops-accent-hover: #b61218;
  --myops-accent-soft: #f9e6e7;
  --myops-accent-contrast: #ffffff;

  /* Operational status */
  --myops-live: #2aa866;
  --myops-live-soft: #e5f5ec;
  --myops-partial: #d99824;
  --myops-partial-soft: #fff3dc;
  --myops-offline: #d44848;
  --myops-offline-soft: #fae7e7;
  --myops-info: #3979b8;
  --myops-info-soft: #e8f1fa;

  /* Typography */
  --myops-font-body: "Segoe UI", Arial, sans-serif;
  --myops-font-condensed: "Bahnschrift Condensed", "Arial Narrow", Arial, sans-serif;
  --myops-font-code: Consolas, "Courier New", monospace;

  /* Shape */
  --myops-radius-control: 0px;
  --myops-radius-panel: 0px;
  --myops-shadow-panel: 0 1px 2px rgb(23 26 30 / 8%);

  /* Spacing scale */
  --myops-space-1: 4px;
  --myops-space-2: 8px;
  --myops-space-3: 12px;
  --myops-space-4: 16px;
  --myops-space-5: 20px;
  --myops-space-6: 24px;
  --myops-space-7: 32px;

  /* Layout */
  --myops-topbar-height: 46px;
  --myops-sidebar-width: 74px;
  --myops-content-max: 1600px;
}

.myryderops-root {
  color: var(--myops-text);
  background: var(--myops-page);
  font-family: var(--myops-font-body);
}

.myryderops-root h1,
.myryderops-root h2,
.myryderops-root h3,
.myryderops-root button,
.myryderops-root .section-label {
  font-family: var(--myops-font-condensed);
}

.myryderops-root .myops-panel {
  background: var(--myops-surface);
  border: 1px solid var(--myops-border);
  border-radius: var(--myops-radius-panel);
  box-shadow: var(--myops-shadow-panel);
}

.myryderops-root .myops-button-primary {
  color: var(--myops-accent-contrast);
  background: var(--myops-accent);
  border: 1px solid var(--myops-accent);
  border-radius: var(--myops-radius-control);
}

.myryderops-root .myops-button-primary:hover {
  background: var(--myops-accent-hover);
  border-color: var(--myops-accent-hover);
}

.myryderops-root .myops-button-secondary {
  color: var(--myops-text);
  background: var(--myops-surface);
  border: 1px solid var(--myops-border-strong);
  border-radius: var(--myops-radius-control);
}

.myryderops-root .myops-status-live {
  color: var(--myops-live);
  background: var(--myops-live-soft);
}

.myryderops-root .myops-status-partial {
  color: var(--myops-partial);
  background: var(--myops-partial-soft);
}

.myryderops-root .myops-status-offline {
  color: var(--myops-offline);
  background: var(--myops-offline-soft);
}

.myryderops-root table {
  background: var(--myops-surface);
  border-collapse: collapse;
}

.myryderops-root th {
  color: var(--myops-text-secondary);
  background: var(--myops-surface-muted);
  font-family: var(--myops-font-condensed);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.myryderops-root th,
.myryderops-root td {
  border-bottom: 1px solid var(--myops-divider);
  padding: var(--myops-space-3) var(--myops-space-4);
}

/* Keep native AFTx styling isolated from the MyRyderOps scope. */
.myryderops-root [data-native-aftx="true"] {
  font-family: inherit;
}