/* xorxius-brand — design tokens + base layer.
 *
 * Consumed by every app in `apps/`. Served by Caddy at
 * `/_brand/v1/brand.css` for every host (mounted via per-app Caddyfile
 * include). The version path (`v1/`) lets us bump the tokens without
 * breaking cached pages.
 *
 * Design language: Brkuljan household — DM Sans (chrome) + DM Mono
 * (every number), dark default with semantic accents. Mirrors the PL
 * `frontend/src/app/globals.css` token set.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=DM+Mono:wght@400;500&display=swap');

[data-theme="dark"], :root {
  --bg: #0b0f14;        /* deepest surface */
  --bg-1: #11161d;      /* card / panel */
  --bg-2: #161c25;      /* nested panel / input */
  --bg-3: #1c2330;      /* hover / active */

  --fg: #e6ecf3;        /* primary text */
  --fg-2: #b8c1cc;      /* secondary text */
  --fg-3: #7b8693;      /* tertiary / muted / labels */

  --bd: #232a35;        /* borders */
  --bd-2: #2c3543;      /* borders, prominent */

  --acc: #6aa9ff;       /* accent / link */
  --gn: #4ade80;        /* buy / long / up / success */
  --rd: #f87171;        /* sell / short / down / error */
  --am: #fbbf24;        /* warn / pending */
  --pu: #c084fc;        /* health / informational */
  --pk: #f472b6;        /* str / hospitality */

  --sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, 'JetBrains Mono', 'Fira Code', monospace;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
}

[data-theme="light"] {
  --bg: #fafbfc;
  --bg-1: #ffffff;
  --bg-2: #f4f6f8;
  --bg-3: #e9edf2;

  --fg: #0b0f14;
  --fg-2: #334155;
  --fg-3: #64748b;

  --bd: #e2e8f0;
  --bd-2: #cbd5e1;

  --acc: #3b82f6;
  --gn: #16a34a;
  --rd: #dc2626;
  --am: #d97706;
  --pu: #9333ea;
  --pk: #db2777;
}

/* --- base layer --- */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Every number renders in mono — global rule. Add class="num" or wrap
 * with .num to opt in.
 */
.num,
code, kbd, samp {
  font-family: var(--mono);
}

code {
  background: var(--bg-2);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  font-size: 0.92em;
  color: var(--am);
}

/* --- price-flash keyframes (used by trading apps; kept here for parity) --- */

@keyframes flash-up {
  0%   { background: rgba(74, 222, 128, 0.35); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0%   { background: rgba(248, 113, 113, 0.35); }
  100% { background: transparent; }
}

.flash-up   { animation: flash-up   300ms ease-out; }
.flash-down { animation: flash-down 300ms ease-out; }

/* --- scrollbar (subtle, themed) --- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bd-2); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--fg-3); }

/* --- focus state (keyboard nav) --- */

:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --- mobile-first util: tap target safety --- */

@media (pointer: coarse) {
  button, a, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* --- safe-area insets for PWA in standalone mode (iOS notch) --- */

@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}