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

:root {
  --main: oklch(1 0 0);
  --secondary: oklch(0.78 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: calc(var(--radius) * 1.25);
  --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: 45px;

  --spacing-padding-card: 1.5rem;
  --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: 1280px;

    --spacing-section-main-x: 100px;
    --spacing-section-main-y: 80px;
    --spacing-height-header: 120px;
  }
}

@layer base {
  html {
    @apply bg-neutral text-main font-sans antialiased;
    scroll-behavior: smooth;
    font-feature-settings: "kern", "liga", "calt";
  }

  body {
    @apply leading-relaxed;
  }

  code {
    @apply font-mono text-sm bg-neutral-accent px-1 py-0.5 rounded-sm;
  }

  h1 {
    @apply text-main font-display text-4xl font-bold leading-tight tracking-tight;
  }

  h2 {
    @apply text-main text-2xl font-semibold leading-snug tracking-tight;
  }

  h3 {
    @apply text-main text-xl font-medium leading-snug;
  }

  h4 {
    @apply text-main text-lg font-medium leading-snug;
  }

  a {
    @apply underline underline-offset-2 decoration-secondary/40 transition-colors;
  }

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

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

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

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

  p,
  li {
    @apply max-w-[65ch] text-base text-secondary;
    line-height: 1.65;
  }

  /* Tight rhythm + ample top-of-section breathing room. Used by Pages
   * whose blocks render Lexical content (legal, blog post). */
  .markdown {
    & h1 {
      @apply mt-0 mb-6;
    }
    & h2 {
      @apply mt-12 mb-3;
    }
    & h3 {
      @apply mt-8 mb-2;
    }
    & h4 {
      @apply mt-6 mb-2 text-secondary;
    }
    & p {
      @apply mb-4;
    }
    & ul {
      @apply ml-5 list-disc mb-4;
    }
    & ol {
      @apply ml-5 list-decimal mb-4;
    }
    & li {
      @apply mb-1;
    }
  }
}
