@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html,
  body,
  #root {
    height: 100%;
  }
  body {
    font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "cv11", "ss01";
  }
  .tnum {
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  .panel {
    @apply bg-panel border border-border rounded-lg;
  }
  .panel-pad {
    @apply p-4;
  }
  .heading {
    @apply text-[11px] font-medium uppercase tracking-[0.12em] text-muted;
  }
  .num {
    @apply font-mono tnum;
  }
  .chip {
    @apply inline-flex items-center gap-1 rounded-md border border-border bg-panel2 px-2 py-0.5 text-xs text-muted;
  }
}