/*
 * globals.css - the only stylesheet you edit.
 *
 * `npm run dev` and `npm run build` compile this file to public/css/styles.css,
 * which the layout links. Never edit public/css/styles.css: it is generated
 * and overwritten on every build.
 *
 * This project was created without Tailwind CSS, so the rules below are plain
 * CSS that you own. They cover the starter pages; add, rename or delete
 * whatever you like.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --background: #ffffff;
  --foreground: #171717;
  --border: oklch(92.8% 0.006 264.531);
  --muted: oklch(96.7% 0.003 264.542);
  --muted-foreground: oklch(55.1% 0.027 264.364);

  --gray-50: oklch(98.5% 0.002 247.839);
  --gray-100: oklch(96.7% 0.003 264.542);
  --gray-200: oklch(92.8% 0.006 264.531);
  --gray-500: oklch(55.1% 0.027 264.364);
  --gray-600: oklch(44.6% 0.03 256.802);
  --gray-700: oklch(37.3% 0.034 259.733);
  --gray-800: oklch(27.8% 0.033 256.848);
  --gray-900: oklch(21% 0.034 264.665);
  --red-600: oklch(57.7% 0.245 27.325);
  --blue-600: oklch(54.6% 0.245 262.881);
  --indigo-600: oklch(51.1% 0.262 276.966);
  --indigo-700: oklch(45.7% 0.24 277.023);

  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --border: oklch(100% 0 0 / 12%);
    --muted: oklch(26.9% 0 0);
    --muted-foreground: oklch(70.8% 0 0);
  }
}

/* ------------------------------------------------------------- base reset */

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid var(--border);
}

html {
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
p,
figure,
pre {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 1em;
}

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

button {
  margin: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

img,
svg {
  display: block;
  vertical-align: middle;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- layout */

.container {
  width: 100%;
}
.flex {
  display: flex;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.inline-block {
  display: inline-block;
}

.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 0%;
}

.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}

.gap-px {
  gap: 1px;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-16 {
  gap: 4rem;
}

.min-h-screen {
  min-height: 100vh;
}
.mx-auto {
  margin-inline: auto;
}
.overflow-auto {
  overflow: auto;
}
.object-contain {
  object-fit: contain;
}

/* --------------------------------------------------------------- spacing */

.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}

.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}

.px-2 {
  padding-inline: 0.5rem;
}
.px-3 {
  padding-inline: 0.75rem;
}
.px-4 {
  padding-inline: 1rem;
}
.px-5 {
  padding-inline: 1.25rem;
}
.px-6 {
  padding-inline: 1.5rem;
}

.py-1 {
  padding-block: 0.25rem;
}
.py-1\.5 {
  padding-block: 0.375rem;
}
.py-2 {
  padding-block: 0.5rem;
}
.py-3 {
  padding-block: 0.75rem;
}
.py-8 {
  padding-block: 2rem;
}
.py-10 {
  padding-block: 2.5rem;
}

/* ---------------------------------------------------------------- sizing */

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}
.size-20 {
  width: 5rem;
  height: 5rem;
}
.h-10 {
  height: 2.5rem;
}
.w-10 {
  width: 2.5rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-2xl {
  max-width: 42rem;
}

/* ------------------------------------------------------------ typography */

.font-mono {
  font-family: var(--font-mono);
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.font-bold {
  font-weight: 700;
}
.font-black {
  font-weight: 900;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1.33333;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.42857;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 1.33333;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-9xl {
  font-size: 8rem;
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[-0\.04em\] {
  letter-spacing: -0.04em;
}
.uppercase {
  text-transform: uppercase;
}
.text-center {
  text-align: center;
}
.text-pretty {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- colors */

.bg-background {
  background-color: var(--background);
}
.bg-border {
  background-color: var(--border);
}
.bg-transparent {
  background-color: transparent;
}
.bg-white {
  background-color: #fff;
}
.bg-gray-50 {
  background-color: var(--gray-50);
}
.bg-gray-100 {
  background-color: var(--gray-100);
}
.bg-blue-600 {
  background-color: var(--blue-600);
}
.bg-indigo-600 {
  background-color: var(--indigo-600);
}

.text-foreground {
  color: var(--foreground);
}
.text-muted-foreground {
  color: var(--muted-foreground);
}
.text-black {
  color: #000;
}
.text-white {
  color: #fff;
}
.text-red-600 {
  color: var(--red-600);
}
.text-gray-200 {
  color: var(--gray-200);
}
.text-gray-500 {
  color: var(--gray-500);
}
.text-gray-600 {
  color: var(--gray-600);
}
.text-gray-700 {
  color: var(--gray-700);
}
.text-gray-800 {
  color: var(--gray-800);
}
.text-gray-900 {
  color: var(--gray-900);
}

/* --------------------------------------------------------------- borders */

.border {
  border-width: 1px;
}
.border-border {
  border-color: var(--border);
}
.border-gray-200 {
  border-color: var(--gray-200);
}
.rounded {
  border-radius: 0.25rem;
}
.shadow-sm {
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* ------------------------------------------------------ motion and focus */

.transition-colors {
  transition:
    color var(--transition),
    background-color var(--transition),
    border-color var(--transition);
}

.transition-transform {
  transition: transform var(--transition);
}

.focus\:outline-none:focus {
  outline: none;
}
.focus\:ring:focus {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.5);
}

.hover\:text-foreground:hover {
  color: var(--foreground);
}
.hover\:bg-gray-200:hover {
  background-color: var(--gray-200);
}
.hover\:bg-indigo-700:hover {
  background-color: var(--indigo-700);
}
.hover\:bg-muted\/50:hover {
  background-color: color-mix(in oklab, var(--muted) 50%, transparent);
}

.group:hover .group-hover\:translate-x-1 {
  transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transform-none {
    transform: none;
  }
}

/* ----------------------------------------------------------- breakpoints */

@media (width >= 40rem) {
  .container {
    max-width: 40rem;
  }
  .sm\:inline {
    display: inline;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 1.11111;
  }
}

@media (width >= 48rem) {
  .container {
    max-width: 48rem;
  }
  .md\:size-24 {
    width: 6rem;
    height: 6rem;
  }
  .md\:px-12 {
    padding-inline: 3rem;
  }
  .md\:py-12 {
    padding-block: 3rem;
  }
  .md\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}

@media (width >= 64rem) {
  .container {
    max-width: 64rem;
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}