@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Source+Sans+3:wght@400;500;600&display=swap');

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

@layer base {
  :root {
    --mosquito-bg: #F3F6F9;
    --mosquito-surface: #FFFFFF;
    --mosquito-ink: #0B1C2C;
    --mosquito-muted: #5F6C7B;
    --mosquito-brand: #0B3A63;
    --mosquito-accent: #16B9A5;
    --mosquito-accent-2: #6AA7FF;
    --mosquito-line: #E0E6ED;
    --mosquito-shadow: 0 20px 50px rgba(11, 28, 44, 0.12);
    --mosquito-card-shadow: 0 12px 24px rgba(11, 28, 44, 0.08);
    --mosquito-font-display: 'IBM Plex Sans', 'Noto Sans SC', sans-serif;
    --mosquito-font-body: 'Source Sans 3', 'Noto Sans SC', sans-serif;
    --mosquito-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  }

  body {
    font-family: var(--mosquito-font-body);
    background: var(--mosquito-bg);
    color: var(--mosquito-ink);
  }
}

@layer components {
  .mosquito-app {
    min-height: 100vh;
    background:
      radial-gradient(circle at top right, rgba(106, 167, 255, 0.18), transparent 45%),
      radial-gradient(circle at 20% 20%, rgba(22, 185, 165, 0.12), transparent 42%),
      var(--mosquito-bg);
    color: var(--mosquito-ink);
  }

  .mos-card {
    border-radius: 16px;
    border: 1px solid var(--mosquito-line);
    background: var(--mosquito-surface);
    box-shadow: var(--mosquito-card-shadow);
  }

  .mos-muted {
    color: var(--mosquito-muted);
  }

  .mos-title {
    font-family: var(--mosquito-font-display);
    letter-spacing: -0.02em;
  }

  .mos-kpi {
    font-family: var(--mosquito-font-mono);
    font-variant-numeric: tabular-nums;
  }

  .mos-pill {
    border-radius: 999px;
    border: 1px solid rgba(22, 185, 165, 0.4);
    background: rgba(22, 185, 165, 0.12);
    color: #0B3A63;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
  }

  .mos-input {
    border-radius: 12px;
    border: 1px solid var(--mosquito-line);
    background: var(--mosquito-surface);
    padding: 10px 12px;
    font-size: 14px;
    color: var(--mosquito-ink);
  }

  .mos-input::placeholder {
    color: rgba(95, 108, 123, 0.6);
  }

  .mos-btn {
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .mos-btn-accent {
    background: var(--mosquito-accent);
    color: white;
    box-shadow: var(--mosquito-card-shadow);
  }

  .mos-btn-secondary {
    border: 1px solid var(--mosquito-line);
    background: var(--mosquito-surface);
    color: var(--mosquito-ink);
  }
}