/* app/static/src/css/main.css — Tailwind entry point (Chapter 05) */

/* Self-hosted fonts (Ch05: build-time only, no runtime CDN dependency).
   Display face used sparingly for headings/labels; body face for UI
   chrome; mono face for every data readout (IPs, counts, paths,
   timestamps) — reinforcing that this app's whole job is turning raw
   log lines into a readable instrument panel. */
@import "@fontsource/space-grotesk/500.css";
@import "@fontsource/space-grotesk/700.css";
@import "@fontsource/public-sans/400.css";
@import "@fontsource/public-sans/500.css";
@import "@fontsource/public-sans/600.css";
@import "@fontsource/jetbrains-mono/400.css";
@import "@fontsource/jetbrains-mono/500.css";

@import "gridjs/dist/theme/mermaid.css";

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

@layer base {
  html {
    color-scheme: light;
  }
  html.dark {
    color-scheme: dark;
  }
  body {
    font-family: theme('fontFamily.sans');
  }
  h1, h2, h3, h4, .font-display {
    font-family: theme('fontFamily.display');
  }
  /* Every number/IP/path/timestamp reads like it came straight off the
     log line — the app's one signature typographic choice. */
  .font-data {
    font-family: theme('fontFamily.mono');
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  /* Grid.js theme override to match the token system in both modes,
     without forking the whole "mermaid" stylesheet. */
  .gridjs-wrapper, .gridjs-container {
    @apply !border-line dark:!border-line-dark !rounded-lg;
  }
  .gridjs-table {
    @apply font-data text-sm;
  }
  .gridjs-th {
    @apply !bg-surface-raised dark:!bg-surface-raised-dark !text-muted dark:!text-muted-dark font-sans !font-medium !text-xs !uppercase !tracking-wide;
  }
  .gridjs-td {
    @apply !bg-surface dark:!bg-surface-dark !text-ink dark:!text-ink-dark !border-line dark:!border-line-dark;
  }
  .gridjs-footer {
    @apply !bg-surface dark:!bg-surface-dark !border-line dark:!border-line-dark;
  }
  .gridjs-pagination .gridjs-pages button {
    @apply !text-ink dark:!text-ink-dark;
  }
  .gridjs-search-input {
    @apply !bg-surface dark:!bg-surface-dark !text-ink dark:!text-ink-dark !border-line dark:!border-line-dark;
  }
}