/*
 * PerfExpert web design tokens (issue #308).
 *
 * Mirrors the mobile 2.5 design system: iOS PerfExpert/DesignSystem/PETheme.swift and Android
 * res/values/colors.xml + dimens.xml. Change a value here only when the apps change theirs.
 * Every token is prefixed `--pe-`; the components in components.css / layout.css only use these.
 */
:root {
  /* Surfaces and text (dark theme, the only theme) */
  --pe-navy: #08082E;            /* page background: navy / background_dark */
  --pe-accent: #1F86FF;          /* primary buttons, links, selection: accentBlue / secondary_blue */
  --pe-accent-10: rgba(31, 134, 255, 0.10);
  --pe-card: #37375D;            /* cards, pills, inputs on the dark background: card / tertiary_blue */
  --pe-muted: #A0A0C2;           /* secondary text, values: mutedText / tertiary_grey */
  --pe-muted-on-card: #ABABCD;   /* web-only: muted text on the card colour; #A0A0C2 is 4.45:1 there, short of AA */
  --pe-accent-text-on-dark: #BFDCFF; /* web-only: accent-tinted text on navy or the card (soft pill); #1F86FF is 2.8:1 on a card */
  --pe-title: #ECEFF1;           /* titles: titleGrey */
  --pe-text: #FFFFFF;            /* primary text */
  --pe-track: rgba(255, 255, 255, 0.25);

  /* States */
  --pe-green: #06CAAE;           /* valid */
  --pe-orange: #FF9900;          /* warning */
  --pe-red: #FF3B30;             /* invalid, destructive */
  --pe-cyan: #00C2FF;

  /* The one light surface: forms and dialogs (white, as in the apps) */
  --pe-dialog-bg: #FFFFFF;
  --pe-dialog-text: #08082E;
  --pe-dialog-muted: #63638A;    /* AA on white; #A0A0C2 is not */
  --pe-dialog-divider: #E0E0E0;
  --pe-hint: #828282;
  --pe-input-border: #D8DADC;
  --pe-red-on-light: #C62828;    /* web-only: error text on the light surface; #FF3B30 is 3.55:1 on white */
  --pe-scrim: rgba(0, 0, 0, 0.5);

  /* SPA light theme (body of the AngularJS views): white cards on a neutral slate grey. Laid out
     after the designer's 2023 light mockups of the app (never shipped), whose periwinkle
     background read too soft (#357). The public server-rendered pages stay navy. */
  --pe-light-bg: #E4E7EB;
  --pe-light-surface: #FFFFFF;
  --pe-light-stripe: #F0F2F5; /* table row stripe on the surface: between the two above */

  /* Chart series, unchanged from chart-viewer */
  --pe-chart-power: #ff6300;
  --pe-chart-torque: #1d81be;
  --pe-chart-distance: #ab47bc;

  /* Radii */
  --pe-radius-btn: 10px;
  --pe-radius-card: 10px;
  --pe-radius-gauge: 16px;
  --pe-radius-dialog: 24px;
  --pe-radius-pill: 100px;

  /* Sizes and spacing */
  --pe-btn-height: 56px;
  --pe-btn-height-sm: 40px;
  --pe-touch-target: 48px;
  --pe-space-1: 8px;
  --pe-space-2: 16px;
  --pe-space-3: 24px;
  --pe-space-4: 32px;
  --pe-space-5: 48px;
  --pe-container: 1000px;
  --pe-gutter: 16px;
  --pe-card-inset: 12px; /* horizontal inset shared by cards, breadcrumb and info boxes */
  --pe-header-height: 64px;

  /* Type: the system font, like the apps (SF on iOS, Roboto on Android) */
  --pe-font: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", sans-serif;
  --pe-font-size: 16px;
  --pe-font-size-sm: 14px;
  --pe-font-size-xs: 12px;
  --pe-font-size-lg: 20px;
  --pe-font-size-title: 28px;
  --pe-font-size-display: 36px;
  --pe-line-height: 1.5;

  --pe-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  --pe-shadow-light: 0 1px 2px rgba(8, 8, 46, 0.06), 0 4px 12px rgba(8, 8, 46, 0.08);
}