@import url("https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&display=swap");

:root {
  --edge-bg: oklch(0.976 0.012 238);
  --edge-surface: oklch(0.995 0.004 238);
  --edge-surface-alt: oklch(0.985 0.008 238);
  --edge-border: oklch(0.91 0.018 238);
  --edge-border-strong: oklch(0.855 0.024 238);
  --edge-text: oklch(0.28 0.028 248);
  --edge-muted: oklch(0.53 0.02 245);
  --edge-primary: oklch(0.56 0.142 248);
  --edge-primary-hover: oklch(0.5 0.136 248);
  --edge-accent: oklch(0.66 0.11 210);
  --edge-accent-warm: oklch(0.74 0.09 78);
  --edge-nav: oklch(0.29 0.03 248);
  --edge-nav-link: oklch(0.9 0.014 240);
  --edge-nav-link-active: oklch(0.98 0.004 240);

  --edge-radius-sm: 10px;
  --edge-radius: 12px;
  --edge-radius-lg: 14px;
  --edge-control-radius: var(--edge-radius-sm);
  --edge-control-height: 42px;
  --edge-control-height-sm: 36px;

  --edge-shadow: 0 10px 26px rgba(26, 52, 92, 0.07);
  --edge-shadow-soft: 0 6px 16px rgba(26, 52, 92, 0.05);
  --edge-modal-shadow: 0 18px 42px rgba(18, 42, 78, 0.16);
  --edge-focus-ring: 0 0 0 0.2rem rgba(74, 127, 214, 0.2);

  --edge-font-body: "Onest", "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
  --edge-font-heading: "Onest", "Segoe UI", "Helvetica Neue", "Noto Sans", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --lh-relaxed: 1.68;
  --edge-tracking-tight: -0.012em;
  --edge-tracking-wide: 0.018em;
  --edge-space-1: clamp(0.42rem, 0.4rem + 0.12vw, 0.54rem);
  --edge-space-2: clamp(0.64rem, 0.58rem + 0.2vw, 0.86rem);
  --edge-space-3: clamp(0.9rem, 0.82rem + 0.32vw, 1.2rem);
  --edge-space-4: clamp(1.2rem, 1.08rem + 0.45vw, 1.55rem);
  --edge-space-5: clamp(1.6rem, 1.42rem + 0.75vw, 2.15rem);
}

.ui-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ui-section-card {
  border: 1px solid var(--edge-border);
  border-radius: var(--edge-radius);
  box-shadow: var(--edge-shadow);
  background: var(--edge-surface);
}

.ui-filter-bar {
  display: grid;
  gap: 0.5rem 0.75rem;
}

.ui-stats-grid {
  display: grid;
  gap: 0.75rem;
}

.ui-state {
  border: 1px solid var(--edge-border);
  border-radius: var(--edge-radius-sm);
  background: var(--edge-surface-alt);
  color: var(--edge-muted);
  padding: 0.75rem 0.9rem;
  font-size: 0.92rem;
}

.ui-state-loading {
  background: #f5f9ff;
  color: #456184;
}

.ui-state-empty {
  background: #f8fafc;
  color: #596b84;
}

.ui-state-error {
  background: #fff2f2;
  border-color: #f3c9c9;
  color: #9b2f2f;
}

.ui-state-inline {
  padding: 0.4rem 0.7rem;
  font-size: 0.84rem;
}

body {
  font-family: var(--edge-font-body);
  color: var(--edge-text);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--edge-font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--edge-tracking-tight);
  margin-bottom: var(--edge-space-2);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-3xl);
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

h4 {
  font-size: var(--text-lg);
}

h5 {
  font-size: var(--text-base);
  font-weight: 600;
}

h6 {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--edge-tracking-wide);
  text-transform: uppercase;
}

p,
li,
label,
input,
select,
textarea,
button {
  font-size: var(--text-base);
}

small,
.small {
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
}

.table,
.num-col {
  font-variant-numeric: tabular-nums;
}