/* External @imports must come first per CSS spec. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
@import "tailwindcss";
@import "tw-animate-css";

/* ===== Warm taupe & burnt-orange palette =====
   A step darker than pure cream: the body is a soft taupe so white-ish
   cards lift off the surface, giving real depth without going dark.
   Borders are more defined; muted surfaces sit between bg and card so
   secondary chrome (toolbars, table headers) reads as quietly recessed.
*/
@theme {
  --color-background: #e8dfc9;        /* warm taupe — deeper than cream */
  --color-foreground: #1c1917;        /* stone-900 */

  --color-card: #faf6ea;              /* lifted off-white cream */
  --color-card-foreground: #1c1917;

  --color-popover: #faf6ea;
  --color-popover-foreground: #1c1917;

  --color-primary: #b8410c;           /* burnt orange, slightly deeper */
  --color-primary-foreground: #fff7ed;

  --color-secondary: #ddd2b8;         /* a touch under the bg */
  --color-secondary-foreground: #1c1917;

  --color-muted: #ddd2b8;             /* toolbars / table headers */
  --color-muted-foreground: #44403c;  /* stone-700 — readable on muted */

  --color-accent: #f8d6a9;            /* warm amber-cream */
  --color-accent-foreground: #7c2d12; /* orange-900 */

  --color-destructive: #a51c1c;
  --color-destructive-foreground: #ffffff;

  --color-border: #c8b994;            /* deeper warm beige border */
  --color-input: #c8b994;
  --color-ring: #d97706;              /* amber-600 focus ring */

  --color-ok: #15803d;
  --color-warn: #b45309;

  --radius: 0.5rem;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, 'Courier New', monospace;
}

@layer base {
  * { @apply border-border; }
  html, body, #root { height: 100%; }
  /* Root rem base. Tailwind sizing (text/heights/padding/gaps) is in rem, so
     this is the single global density knob — shrinks the whole UI uniformly
     while Leaflet maps (px-based) stay correct. Default browser base is 16px. */
  html { font-size: 13px; }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* Subtle elevation on every Card-styled surface so cards visibly sit on
   top of the taupe background — paper-on-paper feel. */
.bg-card {
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05),
              0 0 0 1px rgba(28, 25, 23, 0.02);
}

/* Warm scrollbar tuned to the deeper bg */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #b8a880;
  border-radius: 5px;
  border: 2px solid var(--color-background);
}
::-webkit-scrollbar-thumb:hover { background: #968455; }