/* Aresium's look for its contact form (src/web/contact-page.ts), on the shared layout (contact-form.css, a copy of
   ares-empire web/shared/forms/contact-form.css, loaded first): the iPhone apps' Contact & support on Aresium's wall.
   The colours are the website's (web/public/index.html, html[data-theme="dark"] and "light"); it opens in Aresium's
   own look: dark until switched on aresium.de, then the last choice (web/public/app/appearance.js sets data-theme
   before this file applies). Every custom property the layout uses is set here, for both looks.
   One change, as on the iPhone (Ink.muted): the light muted ink is darker than the website's #88919f, for small text. */

:root {
  color-scheme: dark;
  --bg: #050507;
  --card: rgba(15, 16, 21, 0.55);
  --card-2: rgba(26, 28, 35, 0.62);
  --line-soft: rgba(255, 255, 255, 0.08);
  --ink: #f6f7fb;
  --ink-2: #b3b9c6;
  --ink-3: #6b7280;
  --shadow: 0 30px 70px -26px rgba(0, 0, 0, 0.92);
  --edge: rgba(255, 255, 255, 0.10);
  --glass-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.04) 30%, rgba(255, 70, 92, 0.07) 68%, rgba(255, 255, 255, 0.03));
  --spec: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.07), transparent 46%);
  --glow1: radial-gradient(72% 52% at 50% -12%, rgba(216, 26, 52, 0.36), transparent 60%);
  --glow2: radial-gradient(58% 50% at 90% 120%, rgba(150, 14, 38, 0.24), transparent 56%);
  --bust: url("/brand/hermes-profile.webp");   /* Hermes, god of trade, as on the app icon, in profile */
  --bust-opacity: 0.17;
  /* no accent: the topic's icon, the focused box and the sent mark in the secondary ink, as the iPhone form */
  --highlight: #b3b9c6;
  --focus: rgba(179, 185, 198, 0.55);
  --soft-fill: rgba(179, 185, 198, 0.10);
  --soft-edge: rgba(179, 185, 198, 0.45);
  /* the main button: ivory on the dark wall (FormButtonStyle.ivory), its words near-black (AppAccent.onColor) */
  --button: #eeeee8;
  --button-ink: #141617;
  --problem: #d9b4a6;        /* FormProblem.ink */
  --issue: #ff5d6c;          /* StatusTone.issueColor: the counter over the limit */
  --band-fill: linear-gradient(180deg, #f6f7fb 0%, rgba(127, 127, 127, 0.18) 116%);
  --band-size: clamp(48px, 15.4vw, 220px);   /* ARESIUM: 7 letters across the width */
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #ecedf2;
  --card: rgba(255, 255, 255, 0.74);
  --card-2: rgba(247, 248, 251, 0.82);
  --line-soft: rgba(15, 20, 40, 0.10);
  --ink: #0a0c12;
  --ink-2: #525a69;
  --ink-3: #6e7685;
  --shadow: 0 24px 50px -24px rgba(15, 22, 40, 0.26);
  --edge: rgba(255, 255, 255, 0.85);
  --glass-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 35%, rgba(216, 26, 52, 0.10) 74%, rgba(255, 255, 255, 0.3));
  --spec: radial-gradient(130% 90% at 0% 0%, rgba(255, 255, 255, 0.6), transparent 46%);
  --glow1: radial-gradient(72% 52% at 50% -12%, rgba(216, 26, 52, 0.13), transparent 60%);
  --glow2: radial-gradient(58% 50% at 90% 120%, rgba(216, 26, 52, 0.07), transparent 56%);
  --bust: url("/brand/hermes-profile.webp");
  --bust-opacity: 0.18;
  --highlight: #525a69;
  --focus: rgba(82, 90, 105, 0.55);
  --soft-fill: rgba(82, 90, 105, 0.10);
  --soft-edge: rgba(82, 90, 105, 0.45);
  --button: #16181c;
  --button-ink: #ffffff;
  --problem: #a2503c;
  --issue: #d11f35;
  --band-fill: linear-gradient(180deg, #0a0c12 0%, rgba(127, 127, 127, 0.18) 116%);
}