@import "./timing-functions.css" layer(base);
@import "tailwindcss";

:root {
  --main: oklch(1 0 0);
  --secondary: oklch(0.85 0 0);
  --brand: oklch(0.5609 0.2483 280.67);
  --neutral: oklch(0.155 0.0395 285.68);
  --neutral-accent: oklch(0.1 0.0395 285.68);
  --highlight: oklch(50.38% 0.293655 285.3753);
  --success: oklch(91.1% 0.1605 148.89);
  --error: oklch(67.36% 0.2339 0.92);

  --font-display: "Ubuntu", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
    Bitstream Vera Sans Mono, Courier New, monospace;

  --radius: 0.625rem;
}

@theme inline static {
  --color-main: var(--main);
  --color-secondary: var(--secondary);
  --color-brand: var(--brand);
  --color-neutral: var(--neutral);
  --color-neutral-accent: var(--neutral-accent);
  --color-highlight: var(--highlight);
  --color-success: var(--success);
  --color-error: var(--error);

  --font-display: var(--font-display);

  --radius-card: var(--radius);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

@theme {
  --spacing-main: 20px;
  --spacing-card: 1rem;

  --spacing-section-main-x: 25px;
  --spacing-section-main-y: 25px;

  --spacing-padding-card: 1.25rem;
  --spacing-height-header: 100px;

  --container-max-section: 100%;
}

@variant lg {
  :root {
    --container-max-section: 1000px;

    --spacing-height-header: 90px;
  }
}

@variant xl {
  :root {
    --container-max-section: 1550px;

    --spacing-section-main-x: 100px;
    --spacing-section-main-y: 45px;
    --spacing-height-header: 150px;
  }
}

@layer base {
  html {
    @apply bg-neutral text-main font-sans;
    scroll-behavior: smooth;
  }

  code {
    @apply font-mono;
  }

  h1 {
    @apply text-main font-display text-3xl font-bold;
  }

  h2 {
    @apply text-2xl font-semibold;
  }

  h3 {
    @apply text-xl font-medium;
  }

  h4 {
    @apply text-lg;
  }

  a {
    @apply underline;
  }

  a:hover {
    @apply decoration-main text-main;
  }

  td {
    @apply px-3 py-1 border;
  }

  article {
    & h1,
    h2,
    h3,
    h4,
    h5 {
      @apply mt-6;
    }

    & h1,
    h2,
    h3,
    h4,
    h5,
    p,
    ol,
    ul {
      @apply mb-4;
    }
  }

  p,
  li {
    @apply max-w-[600px] text-base text-secondary;
    line-height: 1.5;
  }

  .markdown {
    & h1 {
      @apply mb-4! mt-8!;
    }

    & h1,
    h2,
    h3,
    h4,
    h5 {
      @apply mb-4! mt-6!;
    }

    & p {
      @apply mb-2! whitespace-break-spaces;
    }

    & ul {
      @apply ml-4!;
    }

    & li {
      @apply ml-4!;
    }
  }
}
