/*
  Aeris Interview: app/packs/dsi-platforms/dsi-platforms.css, the DSi Platforms design pack: the look of DSi's own copy of Aeris
  Interview in a Light and a Dark theme. It is the Aeris Launcher Design Brief v1.1 (Nathan's approved look of 23 October 2026),
  carried to Aeris's screens by the approved design note "Aeris Interview screens in the new Light and Dark look" v1 and screen
  mock v0.5 (PACK.md).
  Owns: the colour tokens for both themes, the tokens that stay the same in both, the page's font, and the page's own base (its
  background, text colour, focus ring). shared/app.css and shared/report.css draw every screen from these tokens and set no
  colour of their own.
  Depends on: nothing. No font is downloaded: Calibri, then Carlito, Arial or the device's sans-serif. shared/theme-init.js sets
  data-theme on <html> before the first paint, and shared/theme.js changes it. With no script the theme is Dark.
  Contract: the brief's tokens have the same names and values as the front door's (frontdoor/site/door/frontdoor.css), and
  app-test/pack.test.js holds them equal, so the two sites cannot drift. The status colours (--ok, --warn, --bad, --info, --ai and
  --neutral, each with a solid background -bg and a border -bd) are Claude's proposal, shown in mock v0.5: the brief has none.
  The same test checks every text and background pair below to WCAG 2 AA (4.5 to 1) in both themes, with one exception it names:
  the brief's disabled text, on a control that cannot be used. Lime (--lime) is for "Available" only, and no Aeris screen uses it.
  Cyan (#00ACDD) is never text on a light background: brand text is --brand. Every focus ring is --focus, cyan in Dark and the
  brief's Structural Blue (#00557D) in Light, because cyan on a light background is under the 3 to 1 a focus ring needs (WCAG 2
  SC 1.4.11): Claude's accessibility fix within the brief's own accessibility rule (23 October 2026), the same on the front door,
  and the test checks it against the page, card and top bar colours in both themes. --cy, --on-cy, --panel and --txt are the
  names shared/clerk-appearance.js reads, so Clerk's panel takes the theme's colours. Colour changes take at most 150 ms.
*/
:root,
[data-theme="dark"] {
  --bg-page: #0B1626;
  --bg-deep: #071120;
  --bg-card: #152740;
  --border-card: #1F3A5C;
  --border-quiet: #2C4A6E;
  --divider: #152740;
  --hero-a: #003C59;
  --hero-b: #0B1626;
  --ph-a: #00557D;
  --ph-b: #071120;
  --icon: #00E5FF;
  --text: #FFFFFF;
  --text-soft: #B8C7D4;
  --text-muted: #8AA0B4;
  --text-disabled: #6B8199;
  --brand: #00ACDD;
  --focus: #00ACDD;
  --card-shadow: none;
  --live-glow: 0 0 0 1px #00ACDD55, 0 12px 40px #00E5FF22;
  --live-glow-hover: 0 0 0 1px #00ACDD88, 0 16px 48px #00E5FF38;
  --soon-bg: #0B1626CC;
  --chip-bg: rgba(0, 172, 221, 0.12);
  --accent-a: #00ACDD;
  --accent-b: #75A38C;
  --bad: #FF9D9D;
  /* The status colours (Claude's proposal): the words, a solid background and a border for each pill. */
  --ok: #6FD69B;
  --ok-bg: #123A2E;
  --ok-bd: #2C7352;
  --warn: #F2C46A;
  --warn-bg: #3B3014;
  --warn-bd: #7A6125;
  --bad-bg: #3E1F2A;
  --bad-bd: #7E3A46;
  --info: #7FCDF2;
  --info-bg: #103452;
  --info-bd: #2A6890;
  --ai: #C4A8FF;
  --ai-bg: #2C2652;
  --ai-bd: #5A4C9A;
  --neutral: #B8C7D4;
  --neutral-bg: #1C3354;
  --neutral-bd: #2C4A6E;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg-page: #F4F7FA;
  --bg-deep: #FFFFFF;
  --bg-card: #FFFFFF;
  --border-card: #D5DEE6;
  --border-quiet: #C3CFD9;
  --divider: #E1E8EE;
  --hero-a: #DCEFF8;
  --hero-b: #F4F7FA;
  --ph-a: #CDEBF6;
  --ph-b: #E8F1F7;
  --icon: #00557D;
  --text: #15222C;
  --text-soft: #5E6A73;
  --text-muted: #5E6A73;
  --text-disabled: #8A97A1;
  --brand: #00557D;
  --focus: #00557D;
  --card-shadow: 0 2px 10px #15222C14;
  --live-glow: 0 0 0 1px #00ACDD66, 0 12px 32px #00ACDD2E;
  --live-glow-hover: 0 0 0 1px #00ACDD99, 0 16px 40px #00ACDD44;
  --soon-bg: #FFFFFFE6;
  --chip-bg: rgba(0, 85, 125, 0.08);
  --accent-a: #00557D;
  --accent-b: #00557D;
  --bad: #B42318;
  --ok: #17683B;
  --ok-bg: #E2F3E8;
  --ok-bd: #9FD0B1;
  --warn: #7A4D00;
  --warn-bg: #FCEFD2;
  --warn-bd: #E3C27A;
  --bad-bg: #FCE8E6;
  --bad-bd: #EBA9A2;
  --info: #00557D;
  --info-bg: #E1F0F8;
  --info-bd: #9DCBE2;
  --ai: #5B3BA8;
  --ai-bg: #EEE8FA;
  --ai-bd: #C2B2EA;
  --neutral: #4F5B64;
  --neutral-bg: #EDF1F4;
  --neutral-bd: #C3CFD9;
  color-scheme: light;
}

/* The same in both themes (brief v1.1), the names Clerk's appearance reads, and the font. */
:root {
  --cyan: #00ACDD;
  --on-cyan: #071120;
  --lime: #96BC33;
  --art-bg: #071120;
  --art-text: #FFFFFF;
  --art-text-soft: #B8C7D4;
  --cy: var(--cyan);
  --on-cy: var(--on-cyan);
  --panel: var(--bg-card);
  --txt: var(--text);
  --font: Calibri, Carlito, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  transition: background-color 150ms, color 150ms;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}