@import "tailwindcss";

@theme inline {
  --color-charcoal-gray: #424040;
  --color-salestrics-red: #f93d3a;
  --color-dashboard-positive: #52b229;
  --color-dashboard-negative: #fc0000;
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

:root {
  --background: #ffffff;
  --foreground: #424040;
  --sidebar: #424040;
  --primary: #f93d3a;
  --positive: #52b229;
  --negative: #fc0000;
}

@layer base {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
  }

  body {
    background: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1 {
    color: var(--primary);
    font-weight: 700;
    letter-spacing: -0.02em;
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--foreground);
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}