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

/* Custom Font Declarations */
@font-face {
  font-family: "Soehne";
  src: url("/tracker/fonts/soehne-buch.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Soehne";
  src: url("/tracker/fonts/soehne-buch-kursiv.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Soehne";
  src: url("/tracker/fonts/soehne-kraftig.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Soehne";
  src: url("/tracker/fonts/soehne-kraftig-kursiv.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Founders Grotesk Mono";
  src: url("/tracker/fonts/founders-grotesk-mono-light.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;

  --bc-beige: #f6ebe3;
  --bc-logo-red: #932f2;
  --bc-border-dark: #585858; /* For the tab borders */
  --bc-border-light: #cdc4bd;
  --bc-tab-hover-bg: #cdc4bd; /* A light gray for tab hover */
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  .font-mono {
    font-family: "Founders Grotesk Mono", "Menlo", "Ubuntu Mono", monospace;
    letter-spacing: 0.07em;
    line-height: 150%;
    text-transform: uppercase;
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0 0% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 3.9%;
    --primary: 0 0% 9%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 96.1%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96.1%;
    --muted-foreground: 0 0% 45.1%;
    --accent: 0 0% 96.1%;
    --accent-foreground: 0 0% 9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 89.8%;
    --input: 0 0% 89.8%;
    --ring: 0 0% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer base {
  body {
    @apply bg-[#f6ebe3];
    font-family:
      "Soehne",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Roboto",
      sans-serif;
    font-weight: 400;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #272727;
    font-family:
      "Soehne",
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      "Roboto",
      sans-serif;
    font-weight: 500;
  }

  button {
    color: #272727;
    font-family:
      "Founders Grotesk Mono", "Menlo", "Ubuntu Mono", monospace; /* System monospace fallback */
    letter-spacing: 0.07em;
    line-height: 150%;
    text-transform: uppercase;
  }
}

/* Custom checkbox styling for white checkmarks */
.white-checkmark[data-state="checked"] {
  background-color: #8b2332 !important;
  border-color: #8b2332 !important;
}

.white-checkmark[data-state="checked"] svg {
  color: white !important;
}
