/* Setpoint design tokens. Every colour the web app uses is a custom property so the site can
   re-skin it. Values mirror the desktop AppTheme palette (BlackboxFlightLab.Desktop/Theme.cs):
   desktop code names colours by their original light-theme hex key; the comment after each
   token gives that key so ports can map 1:1 (see js/palette.js). Dark is the default theme. */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --sp-bg: #131315;              /* #F3F6F9 app background */
  --sp-surface: #1D1D20;         /* #FFFFFF / White: panels, plot background */
  --sp-surface-alt: #252529;     /* #F5F8FB */
  --sp-surface-raised: #2C2C31;  /* #F1F5F9 */
  --sp-surface-sunken: #18181A;  /* #E8EEF4 */
  --sp-text: #ECECEE;            /* #172B40 */
  --sp-text-secondary: #C6C6CB;  /* #53697B, #52677A */
  --sp-text-muted: #9D9DA4;      /* #68798A, #6B7C8E */
  --sp-border: #37373C;          /* #DCE4EC, #DFE6ED, #E0E7EE */
  --sp-border-strong: #37373C;   /* #CCD6E1 */
  --sp-grid: #2B2B30;            /* #E8EDF2 */
  --sp-axis: #66666D;            /* #AAB9C7 */
  --sp-neutral: #8A8A90;         /* #8395A6 */
  --sp-blue: #62B0EA;            /* #1475B8 gyro */
  --sp-amber: #F2A647;           /* #D9790B setpoint */
  --sp-teal: #53D3B8;            /* #0C9485 */
  --sp-grey: #B5B5BB;            /* #7C8793 */
  --sp-grey-light: #5E5E64;      /* #C7D3DF */
  --sp-red: #FF6B73;             /* #D32F3A */
  --sp-pink: #DDA3A8;            /* #D87B82 */
  --sp-header-bg: #0E0E10;       /* HeaderBackground */
  --sp-header-button: #26262A;   /* HeaderButton */
  --sp-accent: #6FBF8E;          /* AppTheme.Accent (sage) */
  --sp-accent-low: #283A2F;      /* SystemListAccentLowColor */
  --sp-accent-medium: #30483A;
  --sp-accent-high: #3A5646;
  --sp-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sp-chart-text-scale: 1.2;    /* AppTheme.TextScale */
}
:root[data-theme="light"] {
  color-scheme: light;
  --sp-bg: #EFEFF0;
  --sp-surface: #FFFFFF;
  --sp-surface-alt: #F6F6F7;
  --sp-surface-raised: #F0F0F2;
  --sp-surface-sunken: #E6E6E8;
  --sp-text: #1E1E21;
  --sp-text-secondary: #4E4E55;
  --sp-text-muted: #6C6C73;
  --sp-border: #DADADD;
  --sp-border-strong: #CFCFD3;
  --sp-grid: #E9E9EC;
  --sp-axis: #ABABB1;
  --sp-neutral: #8A8A90;
  --sp-blue: #1475B8;
  --sp-amber: #D9790B;
  --sp-teal: #0C9485;
  --sp-grey: #7C8793;
  --sp-grey-light: #C7D3DF;
  --sp-red: #D32F3A;
  --sp-pink: #D87B82;
  --sp-header-bg: #2A2A2E;
  --sp-header-button: #3A3A3F;
  --sp-accent: #6FBF8E;
  --sp-accent-low: #D8EEDF;
  --sp-accent-medium: #C3E5CE;
  --sp-accent-high: #ADDBBD;
}

/* Shell (non-chart UI) tokens. Header colours are the same in both themes (the header is dark). */
:root, :root[data-theme="dark"] {
  --sp-header-text: #FFFFFF;
  --sp-header-muted: #9D9DA4;     /* WordmarkTagline */
  --sp-accent-ink: #0E1A12;       /* "+ Add logs" text */
  --sp-selected-bg: color-mix(in srgb, var(--sp-accent) 22%, transparent);       /* #386FBF8E */
  --sp-selected-hover-bg: color-mix(in srgb, var(--sp-accent) 30%, transparent); /* #4C6FBF8E */
  --sp-hover-bg: rgba(255, 255, 255, 0.06);
  --sp-control-bg: rgba(255, 255, 255, 0.2);          /* Fluent ButtonBackground */
  --sp-control-bg-hover: rgba(255, 255, 255, 0.28);
  --sp-control-bg-pressed: rgba(255, 255, 255, 0.12);
  --sp-control-text: #FFFFFF;
  --sp-control-disabled-text: rgba(255, 255, 255, 0.36);
  --sp-input-bg: rgba(0, 0, 0, 0.4);
  --sp-input-bg-focus: #1E1E1E;
  --sp-input-border: rgba(255, 255, 255, 0.45);
  --sp-check-border: rgba(255, 255, 255, 0.6);
  --sp-check-mark: #FFFFFF;
  --sp-toggle-off: rgba(255, 255, 255, 0.6);
  --sp-toggle-knob-on: #0E1A12;
  --sp-tooltip-bg: #2B2B2E;
  --sp-tooltip-text: #ECECEE;
  --sp-tooltip-border: #4A4A50;
  --sp-shadow: rgba(0, 0, 0, 0.45);
  --sp-scrollbar: rgba(255, 255, 255, 0.22);
  --sp-error-bg: #5A1D22;
  --sp-error-text: #FFFFFF;
  /* Per-log colours that AppTheme.Brush leaves unmapped (same in both themes). */
  --sp-log-red: #E5484D;
  --sp-log-purple: #925DC1;
  --sp-log-magenta: #BD4B74;
  --sp-log-green: #5E8C31;
  /* Tune tab, Betaflight-style sliders view (BetaflightSlidersView.cs). */
  --sp-bf-ink: #DDDDDD;
  --sp-bf-muted: #999999;
  --sp-bf-surface: #141414;
  --sp-bf-edge: #393939;
  --sp-bf-yellow: #FFC400;
  --sp-bf-knob: #FFFFFF;
  --sp-bf-roll: #D64D70;
  --sp-bf-pitch: #36A449;
  --sp-bf-yaw: #368BBF;
  --sp-bf-axis-text: #FFFFFF;
}
:root[data-theme="light"] {
  --sp-hover-bg: rgba(0, 0, 0, 0.05);
  --sp-control-bg: rgba(0, 0, 0, 0.2);
  --sp-control-bg-hover: rgba(0, 0, 0, 0.27);
  --sp-control-bg-pressed: rgba(0, 0, 0, 0.12);
  --sp-control-text: #1E1E21;
  --sp-control-disabled-text: rgba(0, 0, 0, 0.36);
  --sp-input-bg: rgba(255, 255, 255, 0.7);
  --sp-input-bg-focus: #FFFFFF;
  --sp-input-border: rgba(0, 0, 0, 0.45);
  --sp-check-border: rgba(0, 0, 0, 0.6);
  --sp-check-mark: #FFFFFF;
  --sp-toggle-off: rgba(255, 255, 255, 0.6);
  --sp-tooltip-bg: #F9F9F9;
  --sp-tooltip-text: #1E1E21;
  --sp-tooltip-border: #CFCFD3;
  --sp-shadow: rgba(0, 0, 0, 0.18);
  --sp-scrollbar: rgba(0, 0, 0, 0.25);
  --sp-error-bg: #FBE3E4;
  --sp-error-text: #1E1E21;
  --sp-bf-ink: #262626;
  --sp-bf-muted: #666666;
  --sp-bf-surface: #FAFAFA;
  --sp-bf-edge: #CCCCCC;
}