@import "tailwindcss/theme.css";
@import "tailwindcss/utilities.css";

@theme {
  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;

  --color-brand: #1978d4;
  --color-brand-strong: #0e5fb9;
  --color-brand-soft: #edf6ff;

  --color-success: #18b979;
  --color-success-strong: #0f7d55;
  --color-success-soft: #e8f7f1;

  --color-danger: #d75b5b;
  --color-danger-strong: #a94f4f;
  --color-danger-soft: #fff6f6;

  --color-warning: #e6a33c;
  --color-warning-soft: #fff0ee;

  --color-ink: #27394d;
  --color-ink-muted: #5d7186;
  --color-ink-subtle: #8b99a8;

  --color-line: #dce4ec;
  --color-line-soft: #edf1f5;

  --color-bg: #f3f6f9;
  --color-bg-panel: #ffffff;
  --color-bg-canvas: #f9fbfd;
  --color-bg-log: #17212b;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-Variable-Italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

@layer base {
  :root {
    font-family: var(--font-sans);
    color: #1f354b;
    background: #f3f6f9;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
  }

  html,
  body {
    margin: 0;
    min-width: 1024px;
    min-height: 100%;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}

@layer utilities {
  .scrollbar-thin::-webkit-scrollbar {
    width: 5px;
  }

  .scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: #d9e1e9;
  }

  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #c4d0dc;
  }
}