@import url("lumen.css");

/* Visual language: developer-grade dark UI. Tokens live here and only here.
   Square primary buttons, pill status chips, monospace for data, high-contrast structure, one blue for active and focus.
   Dark is the default; the light theme is [data-theme="light"] or the system setting when no theme is chosen. */

/* Fonts are self-hosted (app/static/fonts, SIL OFL). Inter has no Display cut here, so Inter at weight 500 is used.
   Geist Mono has no Cyrillic: Russian words in monospace fall back to the system monospace font. */
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/ui/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/ui/fonts/inter-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/ui/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/ui/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-2: #141414;
  --chip-bg: #1f1f1f;
  --ring: rgba(255, 255, 255, 0.145);
  --border: rgba(255, 255, 255, 0.145);
  --text: #ededed;
  --strong: #ffffff;
  --muted: #999999;
  --blue: #52a8ff;          /* active and focus states only */
  --green: #62c073;         /* positive indicators only */
  --primary: #ffffff;       /* square buttons */
  --primary-text: #121212;
  --accent: var(--blue);
  --accent-text: #121212;
  --accent-soft: rgba(82, 168, 255, 0.12);
  --good: var(--green);
  --good-bg: rgba(98, 192, 115, 0.10);
  --warn: #999999;
  --warn-bg: #141414;
  --bad: #ededed;
  --bad-bg: #1f1f1f;
  --star: #ededed;
  --glow: rgba(82, 168, 255, 0.22);
  --bar: rgba(255, 255, 255, 0.18);

  --radius: 8px;
  --radius-sm: 0;           /* buttons and fields are square */
  --gap: 16px;
  --shadow: none;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --num: "Geist", "Inter", system-ui, sans-serif;   /* big numbers and prices */
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --logo-light-display: none;   /* logo.svg: dark mark, for light backgrounds */
  --logo-dark-display: block;   /* logo-light.svg: white mark, for dark backgrounds */
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #ffffff; --surface: #fafafa; --surface-2: #f2f2f2; --chip-bg: #ececec;
    --ring: rgba(0, 0, 0, 0.14); --border: rgba(0, 0, 0, 0.14);
    --text: #1a1a1a; --strong: #000000; --muted: #636363;
    --blue: #0a64c8; --green: #1a7f37; --primary: #121212; --primary-text: #ffffff;
    --accent-soft: rgba(10, 100, 200, 0.10); --good-bg: rgba(26, 127, 55, 0.10);
    --warn: #636363; --warn-bg: #f2f2f2; --bad: #1a1a1a; --bad-bg: #ececec; --star: #1a1a1a;
    --glow: rgba(10, 100, 200, 0.14); --bar: rgba(0, 0, 0, 0.16);
    --logo-light-display: block; --logo-dark-display: none;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #ffffff; --surface: #fafafa; --surface-2: #f2f2f2; --chip-bg: #ececec;
  --ring: rgba(0, 0, 0, 0.14); --border: rgba(0, 0, 0, 0.14);
  --text: #1a1a1a; --strong: #000000; --muted: #636363;
  --blue: #0a64c8; --green: #1a7f37; --primary: #121212; --primary-text: #ffffff;
  --accent-soft: rgba(10, 100, 200, 0.10); --good-bg: rgba(26, 127, 55, 0.10);
  --warn: #636363; --warn-bg: #f2f2f2; --bad: #1a1a1a; --bad-bg: #ececec; --star: #1a1a1a;
  --glow: rgba(10, 100, 200, 0.14); --bar: rgba(0, 0, 0, 0.16);
  --logo-light-display: block; --logo-dark-display: none;
  color-scheme: light;
}

/* Logo slot: logo.svg and logo-light.svg; a text mark shows until they load. */
.logo-img { max-height: 28px; width: auto; }
.logo-for-light { display: var(--logo-light-display); }
.logo-for-dark { display: var(--logo-dark-display); }
.logo-img[hidden] { display: none !important; }
.brand-fallback { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--strong); text-decoration: none; font-size: 20px; letter-spacing: -0.4px; }
.brand-fallback .star { display: inline-grid; place-items: center; width: 24px; height: 24px; background: var(--strong); color: var(--bg); font-size: 14px; line-height: 1; }
.brand-fallback [hidden] { display: none; }

/* Status chip: dot color encodes the state. PASS or published: green, WARN or draft: grey, ERROR or failed: light. */
.v-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px;
  background: var(--chip-bg); color: var(--muted); font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap;
}
.v-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); flex: none; }
.v-chip.pass::before { background: #62c073; }
.v-chip.warn::before { background: #999999; }
.v-chip.error::before { background: #ededed; }
:root[data-theme="light"] .v-chip.pass::before { background: #1a7f37; }
:root[data-theme="light"] .v-chip.error::before { background: #1a1a1a; }
:root[data-theme="light"] .v-chip.warn::before { background: #636363; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .v-chip.pass::before { background: #1a7f37; }
  :root:not([data-theme="dark"]) .v-chip.error::before { background: #1a1a1a; }
  :root:not([data-theme="dark"]) .v-chip.warn::before { background: #636363; }
}

/* Primary call to action: square, white, with a small diagonal arrow. */
.btn-square {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 0; background: var(--primary); color: var(--primary-text);
  padding: 8px 12px; font: 500 14px/1.3 var(--font); text-decoration: none; cursor: pointer;
}
.btn-square::after {
  content: ""; width: 10px; height: 10px; background: currentColor; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8V6.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M3.5 2H8V6.5' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-square.large { font-size: 20px; padding: 12px 18px; gap: 12px; }
.btn-square.large::after { width: 12px; height: 12px; }
.btn-square:hover { filter: brightness(0.9); }
.btn-ghost { display: inline-flex; align-items: center; border: 1px solid var(--ring); border-radius: 0; background: transparent; color: var(--strong);
  padding: 8px 12px; font: 500 14px/1.3 var(--font); text-decoration: none; cursor: pointer; }
.btn-ghost:hover { border-color: var(--muted); }
.btn-ghost.large { font-size: 20px; padding: 12px 18px; }

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