/* AsOfData portal — design tokens v2.4 "calm blue".
   Ratified 2026-07-27. Spec §8.1: tokens ship as CSS custom properties so a
   client estate can re-theme without a rebuild. Status: working values.

   Temporal encoding is load-bearing and never carried by colour alone:
     effective  (as_of)       solid border  + calendar glyph + orange
     knowledge  (known_as_of) dashed border + observation glyph + blue
*/

:root {
  --brand-banner: #2f6bad;
  --brand-banner-hover: #2a5f9b;
  --brand-authority: #1e3a56;
  --brand-glyph-on-banner: #ffb35c;

  --canvas: #f6fafd;
  --surface: #ffffff;
  --surface-sunken: #f0f5fa;

  --text-primary: #1e3a56;
  --text-secondary: #45586b;
  --text-muted: #8fa1b3;
  --text-on-banner: #ffffff;
  --text-on-banner-dim: #bcd4ec;

  --border: #e3ecf4;
  --border-strong: #cddcea;

  --temporal-effective: #e8720c;
  --temporal-effective-line: #d9640f;
  --temporal-effective-text: #a84b08;
  --temporal-effective-wash: #fff1e3;
  --temporal-known: #1d5fa8;
  --temporal-known-text: #174e8c;
  --temporal-known-wash: #eaf2fb;

  --state-ok: #1f7a3d;
  --state-warn: #b06a00;
  --state-error: #b02d08;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", Consolas, "SF Mono", monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 17px;
  --text-xl: 20px;

  --banner-height: 48px;
  --sidebar-width: 208px;
  --assist-width: 300px;

  --shadow-panel: 0 1px 2px rgba(30, 58, 86, 0.06), 0 4px 16px rgba(30, 58, 86, 0.06);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--temporal-known);
  outline-offset: 2px;
  border-radius: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.chip-temporal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  background: var(--surface);
  white-space: nowrap;
}
.chip-temporal.effective {
  border: 1px solid var(--temporal-effective-line);
  color: var(--temporal-effective-text);
}
.chip-temporal.known {
  border: 1px dashed var(--temporal-known);
  color: var(--temporal-known-text);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}