/* Platform Edge design tokens. Light is the default; dark follows the system setting. */
:root {
  /* Core brand */
  --pe-red: #DA291C;          /* BR Red. Brand colour, tint for buttons and active states */
  --pe-yellow: #FFD100;       /* Edge Yellow. One safety-line accent per screen, never text on light */
  --pe-tarmac: #55524E;       /* Tarmac. The platform. Secondary surfaces and icons */
  --pe-black: #161616;        /* Signal Black. Primary text */
  --pe-concrete: #ECEAE5;     /* Concrete. Grouped-list background */
  --pe-steel: #BDB8B0;        /* Rail Steel. Hairlines, disabled */
  --pe-sleeper: #A31B12;      /* Sleeper Red. Pressed red, red on red */

  /* Semantic roles (light) */
  --pe-bg: #FAFAF8;
  --pe-bg-grouped: #ECEAE5;
  --pe-surface: #FFFFFF;
  --pe-text: #161616;
  --pe-text-2: #5E5A55;
  --pe-separator: #D9D6D0;
  --pe-tint: #DA291C;
  --pe-tint-pressed: #A31B12;
  --pe-on-tint: #FFFFFF;
  --pe-glass: rgba(250, 250, 248, 0.72);

  /* Type: Archivo stands in for Rail Alphabet */
  --pe-font: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pe-large-title: 800 34px/41px var(--pe-font);
  --pe-title: 800 28px/34px var(--pe-font);
  --pe-title-2: 700 22px/28px var(--pe-font);
  --pe-headline: 600 17px/22px var(--pe-font);
  --pe-body: 400 17px/22px var(--pe-font);
  --pe-subhead: 400 15px/20px var(--pe-font);
  --pe-footnote: 400 13px/18px var(--pe-font);
  --pe-label: 600 12px/16px var(--pe-font); /* uppercase, letter-spacing .08em */

  /* Shape and spacing */
  --pe-radius-card: 12px;
  --pe-radius-control: 10px;
  --pe-space: 8px;          /* base unit; use 4, 8, 12, 16, 20, 24, 32 */
  --pe-gutter: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pe-bg: #121212; --pe-bg-grouped: #121212; --pe-surface: #1F1E1C;
    --pe-text: #F2F1EE; --pe-text-2: #A8A39C; --pe-separator: #34322F;
    --pe-tint: #FF4A3D; --pe-tint-pressed: #DA291C; --pe-on-tint: #FFFFFF;
    --pe-glass: rgba(31, 30, 28, 0.72); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pe-bg: #121212; --pe-bg-grouped: #121212; --pe-surface: #1F1E1C;
  --pe-text: #F2F1EE; --pe-text-2: #A8A39C; --pe-separator: #34322F;
  --pe-tint: #FF4A3D; --pe-tint-pressed: #DA291C; --pe-on-tint: #FFFFFF;
  --pe-glass: rgba(31, 30, 28, 0.72); color-scheme: dark;
}