@import "./timing-functions.css" layer(base);
@import "./page-transition.css" layer(base);
@import "tailwindcss";
@import "tw-animate-css";

@source "./**/*.{js,mjs}";


:root {
  --main: oklch(0.26 0 0);
  --accent: oklch(79.108% 0.12111 161.392);
  --primary: oklch(0.81 0.21 153.05);
  --brand: oklch(51.093% 0.08281 161.38);
  --neutral: oklch(96.768% 0.04981 155.178); 
  --neutral-accent: oklch(0.92 0.13 152.01);
  --neutral-highlight: oklch(0.7448 0.1823 50.477);
  --highlight: oklch(89.063% 0.2092 147.54);
  --success: oklch(91.1% 0.1605 148.89);
  --error: oklch(65.7% 0.22923 26.238);

  --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-primary: var(--primary);
  --color-accent: var(--accent);
  --color-brand: var(--brand);
  --color-neutral: var(--neutral);
  --color-neutral-accent: var(--neutral-accent);
  --color-neutral-highlight: var(--neutral-highlight);
  --color-highlight: var(--highlight);
  --color-success: var(--success);
  --color-error: var(--error);

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

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

@theme {
  --spacing-main: 15px;
  --spacing-card: 1.5rem;

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

  --spacing-input-height: 3rem;

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

  --container-max-section: 100%;

  --animate-collapsible-down: collapsible-down 0.6s var(--ease-out-quart);
  --animate-collapsible-up: collapsible-up 0.6s var(--ease-out-quart);
  --animate-accordion-down: accordion-down 0.6s var(--ease-out-quart);
  --animate-accordion-up: accordion-up 0.6s var(--ease-out-quart);
  

  @keyframes collapsible-down {
    from {
      height: 0;
      opacity: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
      opacity: 1;
    }
  }

  @keyframes collapsible-up {
    from {
      height: var(--radix-collapsible-content-height);
      opacity: 1;
    }
    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);

    }
    to {
      height: 0;
    }
  }
}

@variant dark {
  :root {
    --main: oklch(1 0 0);
    --accent: oklch(1 0 0 / 0.5);
    --secondary: oklch(0.8 0 0);
    --primary: oklch(0.83 0.26 156.18);
    --neutral: oklch(0.25 0.04 169.89);
    --neutral-highlight: oklch(0.7448 0.1823 50.477);
    --neutral-accent: oklch(0.29 0.02 179);
    --highlight: oklch(66.39% 0.2398 3.2);
    --success: oklch(91.1% 0.1605 148.89);
    --error: oklch(67.36% 0.2339 0.92);
  }
}

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

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

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

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

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

  code {
    @apply font-mono;
  }

  h1 {
    @apply text-main font-display;
  }

  h1 {
    @apply 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;
  }

  [astro-icon] {
    fill: currentColor;
  }

  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;
  }
}