@import "tailwindcss";

@theme {
  /* Design tokens */
  --color-text: #0f0f0f;
  --color-background: #fbfbfb;
  --color-background-ui: #da5893;
  --color-logo-primary: #faa2ca;
  --color-logo-stroke: #382731;
  --color-text-stroke: #f6f6f6;
  --color-mid-gray: #808080;
}

:root {
  /* Typography */
  font-size: 15px;
  line-height: 24px;
  font-weight: 400;

  /* Colors - Light Theme */
  /* --color-text: #0f0f0f;
  --color-background: #fbfbfb;
  --color-logo-primary: #FAA2CA;
  --color-logo-stroke: #382731;
  --color-text-stroke: #f6f6f6; */

  /* Typography settings */
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  --scrollbar-thumb: color-mix(in srgb, var(--color-text), transparent 85%);
  --scrollbar-thumb-hover: color-mix(
    in srgb,
    var(--color-text),
    transparent 70%
  );

  /* Apply colors */
  color: var(--color-text);
  background-color: var(--color-background);
}

.container {
  margin: 0;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Colors - Dark Theme */
    --color-text: #fbfbfb;
    --color-background: #2c2b29;
    --color-logo-primary: #f28cbb;
    --color-logo-stroke: #fad1ed;
  }
}

/* macOS - tint native overlay scrollbar thumb */
:root[data-platform="macos"] {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Custom Scrollbar - only on Windows/Linux; macOS uses native overlay scrollbars */
:root:not([data-platform="macos"]) ::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

:root:not([data-platform="macos"]) ::-webkit-scrollbar-track {
  background: transparent;
}

:root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 20px;
  border: 3px solid transparent;
  border-right-width: 4px;
  border-left-width: 3px;
  background-clip: content-box;
  min-height: 32px;
}

:root:not([data-platform="macos"]) ::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-thumb-hover);
}

@layer utilities {
  .text-stroke {
    -webkit-text-stroke: 2px var(--color-text-stroke);
  }
}

.logo-primary {
  fill: var(--color-logo-primary);
}

.logo-stroke {
  fill: var(--color-logo-stroke);
  stroke: var(--color-logo-stroke);
  stroke-width: 1;
}