/* Suprsuit color tokens: the one place color lives. Loaded first by the web app (/app/), the Telegram Mini App, the door pages
   and the live viewer. Neutral grayscale, near-black and white, in the manner of Perplexity, Claude, ChatGPT and Cursor
   (design/miniapp-notes.md, "Neutral grayscale"). The primary button is inverted (light on dark, dark on light), and the accent
   is the text color itself. Color appears only to say something: green = done/safe, amber = needs you, red = danger/stop.
   Status text colors clear WCAG AA (4.5:1) on page, card and raise in both schemes. Do not add hues here; change the status ones only.

   Dark is the default. Light applies from, in order:
     html[data-scheme="light"]   the Mini App (Telegram's colorScheme)
     :root[data-theme="light"]   the web app's theme button
     prefers-color-scheme: light when neither attribute is set (door pages, live viewer, a browser tab) */

:root {
  /* Corner radii: one short scale. Chips and code 6, inner blocks and inputs 8, small tiles 12, cards and bubbles 16, sheets 24,
     pills and switches 999. Do not add values between. */
  --r-xs: 6px; --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px;
  --page: #171717;
  --rail: #121212;
  --card: #1f1f1f;
  --raise: #292929;
  --fg: #ececec;
  --muted: #a3a3a3;
  --hint: #a3a3a3;
  --sep: rgba(255, 255, 255, 0.1);
  --tint: rgba(255, 255, 255, 0.06);
  --tint-2: rgba(255, 255, 255, 0.1);
  --accent: #ececec;
  --btn: #ececec;
  --btn-fg: #121212;
  --brand: #ececec;
  --brand-ink: #121212;
  --danger: #f58b83;
  --ok: #6fcf8e;
  --ok-t: #6fcf8e;
  --ok-bg: rgba(111, 207, 142, 0.12);
  --warn: #e3a94d;
  --warn-t: #e3a94d;
  --warn-bg: rgba(227, 169, 77, 0.12);
  --bad: #f58b83;
  --bad-t: #f58b83;
  --bad-bg: rgba(245, 139, 131, 0.12);
  --focus: #ececec;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  --screen-bg: #000000;
  --line-2: rgba(255, 255, 255, 0.16);
  --shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.36);
  --scrim: rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* The owner web shell's system (/app: rail, top bar, menus, screens; docs/44). Crisp and precise, in the manner of Linear, Vercel,
   Raycast and macOS settings: a 4 px grid, one type scale, hairlines instead of shadows, radii 4/6/8, controls 28/32/36 tall. The
   remote shell's stylesheets take every size from here; nothing in between. Touch screens get 40/44 px controls (WCAG target size). */
:root {
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-s: 13px; --fs-m: 14px; --fs-l: 16px; --fs-xl: 20px; --fs-2xl: 24px;
  --lh: 1.45; --lh-tight: 1.25;
  --fw-r: 400; --fw-m: 500; --fw-s: 600;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --rad-s: 4px; --rad-m: 6px; --rad-l: 8px;
  --h-s: 28px; --h-m: 32px; --h-l: 36px;
  --ic-s: 16px; --ic-m: 20px;
  --line: 1px solid var(--sep);
  --ring: 0 0 0 2px var(--page), 0 0 0 4px var(--focus);
  --dur: 120ms; --dur-l: 160ms; --ease: cubic-bezier(0.2, 0, 0, 1);
  --rail-w: 64px; --bar-h: 40px; --pane-w: 360px;
}
@media (pointer: coarse) {
  :root { --h-s: 36px; --h-m: 40px; --h-l: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-l: 0ms; }
}

html[data-scheme="light"],
:root[data-theme="light"] {
  --page: #f5f5f5;
  --rail: #fafafa;
  --card: #ffffff;
  --raise: #efefef;
  --fg: #171717;
  --muted: #595959;
  --hint: #595959;
  --sep: rgba(0, 0, 0, 0.12);
  --tint: rgba(0, 0, 0, 0.045);
  --tint-2: rgba(0, 0, 0, 0.08);
  --accent: #171717;
  --btn: #171717;
  --btn-fg: #ffffff;
  --brand: #171717;
  --brand-ink: #ffffff;
  --danger: #b42318;
  --ok: #17703a;
  --ok-t: #17703a;
  --ok-bg: rgba(23, 112, 58, 0.1);
  --warn: #8a5300;
  --warn-t: #8a5300;
  --warn-bg: rgba(138, 83, 0, 0.1);
  --bad: #b42318;
  --bad-t: #b42318;
  --bad-bg: rgba(180, 35, 24, 0.09);
  --focus: #171717;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.1);
  --screen-bg: #1a1a1a;
  --line-2: rgba(0, 0, 0, 0.18);
  --shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.32);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]):not([data-scheme]) {
    --page: #f5f5f5;
    --rail: #fafafa;
    --card: #ffffff;
    --raise: #efefef;
    --fg: #171717;
    --muted: #595959;
    --hint: #595959;
    --sep: rgba(0, 0, 0, 0.12);
    --tint: rgba(0, 0, 0, 0.045);
    --tint-2: rgba(0, 0, 0, 0.08);
    --accent: #171717;
    --btn: #171717;
    --btn-fg: #ffffff;
    --brand: #171717;
    --brand-ink: #ffffff;
    --danger: #b42318;
    --ok: #17703a;
    --ok-t: #17703a;
    --ok-bg: rgba(23, 112, 58, 0.1);
    --warn: #8a5300;
    --warn-t: #8a5300;
    --warn-bg: rgba(138, 83, 0, 0.1);
    --bad: #b42318;
    --bad-t: #b42318;
    --bad-bg: rgba(180, 35, 24, 0.09);
    --focus: #171717;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px rgba(0, 0, 0, 0.1);
    --screen-bg: #1a1a1a;
    --line-2: rgba(0, 0, 0, 0.18);
    --shadow-pop: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.12);
    --scrim: rgba(0, 0, 0, 0.32);
    color-scheme: light;
  }
}