/*
 * Design tokens mirrored from 365mesh-demo-portal (teal theme).
 * @see 365mesh-demo-portal/src/theme/tokens/index.ts
 */
:root {
  --app-color-brand-primary: #06a2bf;
  --app-color-brand-primary-strong: #0588a1;
  --app-color-brand-secondary: #42a1ec;
  --app-color-brand-ink: #062a3d;
  --app-color-brand-nav-item-hover-bg: #d4f0f6;
  --app-color-surface-background: #f4f7fa;
  --app-color-surface-card: #ffffff;
  --app-color-surface-card-accent: #f6f9fb;
  --app-color-surface-card-border: rgba(6, 42, 61, 0.08);
  --app-color-surface-stage: #07141d;
  --app-color-surface-app-bar: rgba(255, 255, 255, 0.78);
  --app-color-text-primary: #1d2b36;
  --app-color-text-secondary: #6b7885;
  --app-color-text-muted: #9aa5b1;
  --app-color-status-safe: #2e9b78;
  --app-color-status-safe-bg: #e7f6f0;
  --app-color-status-danger: #d95c66;
  --app-color-status-danger-bg: #fdecee;
  --app-color-status-warning: #e3a23a;
  --app-color-status-info: #4b8cd8;
  --app-chart-grid: #edf1f5;
  --app-chart-axis: #a2adba;
  --app-chart-text: #5f6b7a;
  --app-spacing-unit: 8px;
  --app-border-radius-small: 8px;
  --app-border-radius-medium: 12px;
  --app-border-radius-large: 18px;
  --app-elevation-card: 0 1px 2px rgba(6, 42, 61, 0.04), 0 12px 32px -12px rgba(6, 42, 61, 0.16);
  --app-elevation-raised: 0 18px 40px -18px rgba(6, 162, 191, 0.55);
  --app-typography-h5-font-size: 17px;
  --app-typography-h5-font-weight: 600;
  --app-typography-h6-font-size: 15px;
  --app-typography-h6-font-weight: 600;
  --app-typography-body-font-size: 14px;
  --app-typography-label-font-size: 13px;
  --app-typography-caption-font-size: 12px;
  --app-sizing-form-field-medium: 44px;
  font-family: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 520px at 85% -10%, rgba(6, 162, 191, 0.12), transparent 60%),
    radial-gradient(900px 480px at -10% 10%, rgba(66, 161, 236, 0.10), transparent 60%),
    var(--app-color-surface-background);
  color: var(--app-color-text-primary);
  font-size: var(--app-typography-body-font-size);
}

h1 {
  margin: 0;
  font-size: var(--app-typography-h5-font-size);
  font-weight: var(--app-typography-h5-font-weight);
  line-height: 1.2;
}

button,
select {
  font-family: inherit;
}

[hidden] {
  display: none !important;
}