/* web/src/styles/global.css */

/* https://fontsource.org/fonts/inter/install */
/* inter-latin-wght-normal */
@font-face {
    font-family: "InterVariable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(@fontsource-variable/inter/files/inter-latin-wght-normal.woff2)
        format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
}
/* inter-latin-400-normal */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src:
        url(@fontsource/inter/files/inter-latin-400-normal.woff2) format("woff2"),
        url(@fontsource/inter/files/inter-latin-400-normal.woff) format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
}
/* inter-latin-500-normal */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src:
        url(@fontsource/inter/files/inter-latin-500-normal.woff2) format("woff2"),
        url(@fontsource/inter/files/inter-latin-500-normal.woff) format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
}
/* inter-latin-600-normal */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src:
        url(@fontsource/inter/files/inter-latin-600-normal.woff2) format("woff2"),
        url(@fontsource/inter/files/inter-latin-600-normal.woff) format("woff");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
        U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
        U+FFFD;
}
/* lemonmilk-medium  */
@font-face {
    font-family: "lemonmilk";
    font-style: normal;
    font-weight: medium;
    src: url("src/assets/fonts/LEMONMILK-Medium.otf") format("opentype");
}
/* lemonmilk-bold  */
@font-face {
    font-family: "lemonmilk";
    font-style: normal;
    font-weight: bold;
    src: url("src/assets/fonts/LEMONMILK-Bold.otf") format("opentype");
}
/* lemonmilk-light  */
@font-face {
    font-family: "lemonmilk";
    font-style: normal;
    font-weight: light;
    src: url("src/assets/fonts/LEMONMILK-Light.otf") format("opentype");
}
/* lemonmilk-regular  */
@font-face {
    font-family: "lemonmilk";
    font-style: normal;
    font-weight: normal;
    src: url("src/assets/fonts/LEMONMILK-Regular.otf") format("opentype");
}
/* leelawadee-ui  */
@font-face {
    font-family: "leelawadee";
    font-style: normal;
    font-weight: 400;
    font-weight: normal;
    src: url("src/assets/fonts/leelawadee-ui.ttf") format("truetype");
}

@import "tailwindcss";

/* tailwind plugins */
@plugin "@tailwindcss/forms";
@plugin "tailwindcss-animate";

/* dark mode */
@variant dark (&:where(.dark, .dark *));

/* theme definition import */
@import "./tailwind-theme.css";

/* layer definitions */
@layer theme, base, components, utilities;

@layer base {
    :root {
        /* starwind component variables */
        --background: var(--color-base-100);
        --foreground: var(--color-base-900);
        --card: var(--color-base-50);
        --card-foreground: var(--color-base-950);
        --popover: var(--color-base-50);
        --popover-foreground: var(--color-base-950);
        --primary: var(--color-primary-700);
        --primary-foreground: var(--color-base-50);
        --secondary: var(--color-fuchsia-700);
        --secondary-foreground: var(--color-base-50);
        --muted: var(--color-base-100);
        --muted-foreground: var(--color-base-600);
        --accent: var(--color-base-200);
        --accent-foreground: var(--color-base-900);
        --info: var(--color-sky-300);
        --info-foreground: var(--color-sky-950);
        --success: var(--color-green-300);
        --success-foreground: var(--color-green-950);
        --warning: var(--color-amber-300);
        --warning-foreground: var(--color-amber-950);
        --error: var(--color-red-700);
        --error-foreground: var(--color-base-50);
        --border: var(--color-base-300);
        --input: var(--color-base-100);
        --outline: var(--color-base-950);

        --radius: 0.5rem;

        /* custom shiki styling for markdown code blocks. These are the variables Astro uses
        Shiki Themes: https://shiki.style/themes   https://shiki.matsu.io/guide/theme-colors#css-variables-theme */
        --astro-code-foreground: var(--color-base-50);
        --astro-code-background: #1c1830;
        --astro-code-token-constant: #a5b4fc; /* recommend making this a slightly off color from your primary-300 color */
        --astro-code-token-string: var(--color-primary-600);
        --astro-code-token-comment: var(--color-base-400);
        --astro-code-token-keyword: var(--color-base-300);
        --astro-code-token-parameter: var(--color-sky-400);
        --astro-code-token-function: var(--color-base-50);
        --astro-code-token-string-expression: var(--color-primary-300);
        --astro-code-token-punctuation: var(--color-base-200);
        --astro-code-token-link: var(--color-base-50);

        --font-fallback: "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica",
            "Arial", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        font-family: "Inter", var(--font-fallback);
        font-feature-settings:
            "liga" 1,
            "calt" 1; /* fix for Chrome */
    }

    @supports (font-variation-settings: normal) {
        :root {
            font-family: "lemonmilk", "leelawadee",  var(--font-fallback);
        }
    }

    .dark {
        /* starwind dark theme config */
        --background: var(--color-base-900);
        --foreground: var(--color-base-100);
        --card: oklch(1% 0 0);
        --card-foreground: var(--color-base-100);
        --popover: oklch(1% 0 0);
        --popover-foreground: var(--color-base-100);
        --primary: var(--color-primary-400);
        --primary-foreground: oklch(1% 0 0);
        --secondary: var(--color-fuchsia-300);
        --secondary-foreground: oklch(1% 0 0);
        --muted: var(--color-base-900);
        --muted-foreground: var(--color-base-400);
        --accent: var(--color-base-900);
        --accent-foreground: var(--color-base-100);
        --info: var(--color-sky-300);
        --info-foreground: var(--color-sky-950);
        --success: var(--color-green-300);
        --success-foreground: var(--color-green-950);
        --warning: var(--color-amber-300);
        --warning-foreground: var(--color-amber-950);
        --error: var(--color-red-800);
        --error-foreground: oklch(99% 0 0);
        --border: var(--color-base-800);
        --input: var(--color-base-800);
        --outline: var(--color-base-50);

        @apply scheme-dark;
    }

    /* starwind preflight merged with Cosmic Themes */
    * {
        @apply border-border;
    }
    *:focus-visible {
        @apply outline-outline !transition-none;
    }
    html {
        @apply bg-background text-foreground leading-[1.6rem] scheme-light dark:scheme-dark;
        scroll-behavior: smooth;
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }
    button {
        @apply cursor-pointer;
    }
}

@layer components {
    .h1 {
        @apply text-3xl font-bold md:text-4xl;
    }

    .h2 {
        @apply text-3xl font-medium;
    }

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

    .description {
        @apply text-base-900 dark:text-base-100 md:text-lg;
        font-family:"leelawadee", sans-serif;
    }

    p {
        @apply text-base-900 dark:text-base-100;
        font-family:"leelawadee", sans-serif;
    }

    /* styles navbar links */
    .nav__link--base {
        @apply text-base-900 hover:text-base-600 dark:text-base-200/90 dark:hover:text-base-50 leading-tight transition;
    }

    .site-container {
        @apply mx-auto max-w-[1100px] px-4;
    }

    /* used for newsletter, and contact form inputs */
    .form__input {
        @apply border-base-300 bg-base-100 hover:border-primary-500 dark:border-base-600/60 dark:bg-base-800 w-full rounded-md border px-3 transition;
        @apply focus:border-primary-500 focus-visible:ring-primary-500 focus-visible:ring-2;

        &::placeholder {
            @apply text-base-400;
        }
    }

    /**
     * * general styling for any markdown rendered content
     *
     * Apply styling with the "markdown-content" class
     * Cancel out the styling with the "not-content" class
     */
    /* text coloring for most items */
    .markdown-content
        :not(pre *, .admonition *, details *, blockquote *, a, h1, h2, h3, h4, h5, h6):not(
            :where(.not-content *)
        ) {
        @apply text-foreground/80;
    }
    /* paragraph spacing except for list items */
    .markdown-content p:not(li):not(:where(.not-content *)) {
        @apply mt-2;
        font-family: "leelawadee", sans-serif;
    }
    /* Headings after non-headings have more spacing. */
    .markdown-content
        :not(h1, h2, h3, h4, h5, h6)
        + :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
        @apply mt-6 mb-4;
    }
    .markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
        @apply text-foreground mt-2 text-base leading-normal;
    }
    .markdown-content h1:not(:where(.not-content *)) {
        @apply text-3xl font-bold md:text-4xl;
    }
    .markdown-content h2:not(:where(.not-content *)) {
        @apply text-2xl font-medium md:text-3xl;
    }
    .markdown-content h3:not(:where(.not-content *)) {
        @apply text-xl font-normal md:text-2xl;
    }
    .markdown-content h4:not(:where(.not-content *)) {
        @apply text-lg font-medium md:text-xl;
    }
    .markdown-content h5:not(:where(.not-content *)) {
        @apply text-foreground/85 font-medium md:text-lg;
    }
    .markdown-content h6:not(:where(.not-content *)) {
        @apply text-foreground/85 font-medium md:text-lg;
    }
    /* anchor tags */
    .markdown-content a:not(:where(.not-content *)) {
        @apply hover:text-primary-600 dark:hover:text-primary-400 text-foreground decoration-primary-500 dark:decoration-primary-400 underline transition-colors;
    }
    /* code */
    .markdown-content code:not(:where(.not-content *)) {
        @apply bg-base-200/50 border-border dark:bg-base-800 rounded-md border-2 border-solid px-[.1rem] py-0;
    }
    .markdown-content :is(h1, h2, h3, h4, h5, h6) code {
        @apply text-inherit;
    }
    /* code block styling */
    .markdown-content pre:not(:where(.not-content *)) {
        @apply border-border my-4 rounded-md border px-4 py-3;
        tab-size: 2;
    }
    /* reset styling for code blocks */
    .markdown-content pre code:not(:where(.not-content *)) {
        all: unset;
        @apply font-mono;
    }
    /* blockquotes */
    .markdown-content blockquote:not(:where(.not-content *)) {
        @apply border-primary-600 dark:border-primary-400 border-l-4 pl-4 font-medium italic;
    }
    /* images, videos, etc */
    .markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
        @apply my-4 block h-auto w-full rounded-md;
    }
    /* italics */
    .markdown-content em:not(:where(.not-content *)) {
        @apply text-foreground italic;
    }
    /* bold */
    .markdown-content strong:not(:where(.not-content *)) {
        @apply text-foreground font-semibold;
    }
    /* lists */
    .markdown-content li + li:not(:where(.not-content *)),
    .markdown-content dt + dt:not(:where(.not-content *)),
    .markdown-content dt + dd:not(:where(.not-content *)),
    .markdown-content dd + dd:not(:where(.not-content *)) {
        @apply mt-0.5;
    }
    .markdown-content li:not(:where(.not-content *)) {
        @apply pl-2;
        overflow-wrap: anywhere;
    }
    .markdown-content :is(ul, ol):not(:where(.not-content *)) {
        @apply my-4 mb-8 ml-6 list-outside space-y-2;
    }
    .markdown-content :is(ul):not(:where(.not-content *)) {
        @apply list-disc;
    }
    .markdown-content :is(ol):not(:where(.not-content *)) {
        @apply list-decimal;
    }
    .markdown-content dt:not(:where(.not-content *)) {
        @apply font-semibold;
    }
    .markdown-content dd:not(:where(.not-content *)) {
        @apply ps-4;
    }
    /* Table styling */
    .markdown-content table:not(:where(.not-content *)) {
        @apply block w-full table-auto border-spacing-0 overflow-auto text-sm;
    }
    .markdown-content :is(thead, tbody):not(:where(.not-content *)) {
        @apply w-full;
    }
    .markdown-content tr:not(:where(.not-content *)) {
        @apply w-full;
    }
    .markdown-content :is(th, td):not(:where(.not-content *)) {
        @apply border-border table-cell border-b px-4 py-2;
        /* Align text to the top of the row in multiline tables. */
        vertical-align: baseline;
    }
    .markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
        padding-inline-start: 0;
    }
    .markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
        padding-inline-end: 0;
    }
    .markdown-content th:not(:where(.not-content *)) {
        @apply text-foreground font-medium;
    }
    /* Align headings to the start of the line unless set by the `align` attribute. */
    .markdown-content th:not([align]):not(:where(.not-content *)) {
        text-align: start;
    }
    /* <table>s, and <hr>s inside admonitions */
    .markdown-content .admonition :is(th, td, hr):not(:where(.not-content *)) {
        @apply border-border;
    }
    .markdown-content hr:not(:where(.not-content *)) {
        @apply border-b-border my-8 border-0 border-b-1;
    }
    /* <details> and <summary> styles */
    .markdown-content details:not(:where(.not-content *)) {
        --details-border-color: var(--border);
        --details-border-color--hover: var(--primary);
        border-inline-start: 2px solid var(--details-border-color);
        padding-inline-start: 1rem;
    }
    .markdown-content details:not([open]):hover:not(:where(.not-content *)),
    .markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
        /* border-color: var(--details-border-color--hover); */
        @apply opacity-90;
    }
    .markdown-content summary:not(:where(.not-content *)) {
        @apply text-foreground block cursor-pointer font-semibold;
        /* Expand the outline so that the marker cannot distort it. */
        margin-inline-start: -0.5rem;
        padding-inline-start: 0.5rem;
    }
    .markdown-content details[open] > summary:not(:where(.not-content *)) {
        margin-bottom: 1rem;
    }
    /* <summary> marker styles */
    .markdown-content summary:not(:where(.not-content *))::marker,
    .markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
        display: none;
    }
    .markdown-content summary:not(:where(.not-content *))::before {
        --details-marker-size: 1.25rem;
        background-color: currentColor;
        content: "";
        display: inline-block;
        height: var(--details-marker-size);
        width: var(--details-marker-size);
        margin-inline: calc((var(--details-marker-size) / 4) * -1) 0.25rem;
        vertical-align: middle;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }
    @media (prefers-reduced-motion: no-preference) {
        .markdown-content summary:not(:where(.not-content *))::before {
            transition: transform 0.2s ease-in-out;
        }
    }
    .markdown-content details[open] > summary:not(:where(.not-content *))::before {
        transform: rotateZ(90deg);
    }
    [dir="rtl"] .markdown-content summary:not(:where(.not-content *))::before,
    .markdown-content [dir="rtl"] summary:not(:where(.not-content *))::before {
        transform: rotateZ(180deg);
    }
    /* <summary> with only a paragraph automatically added when using MDX */
    .markdown-content summary:not(:where(.not-content *)) p:only-child {
        display: inline;
    }

    /* buttons, 4 variants: "primary", "secondary", "outline", "ghost" */
    .button {
        @apply flex items-center justify-center rounded-md px-4 py-1 font-semibold;
        /* @apply active:opacity-90; */
        @apply focus:ring-offset-base-200 dark:focus:ring-offset-base-800 focus:outline-hidden;
        @apply disabled:pointer-events-none;
    }
    .button--primary {
        @apply bg-gradient-to-b from-base-950 from-0% via-primary-900 via-30% via-primary-950 via-52% to-base-900 text-base-100;
        @apply hover:to-primary-800 dark:hover:to-base-950;
        @apply focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2;
    }
    /* secondary and outline are the same in this case */
    .button--secondary {
        @apply border-primary-500 bg-base-200/70 dark:border-primary-600 dark:bg-base-800/70 border transition-colors;
        @apply hover:border-primary-400 dark:hover:border-primary-700;
        @apply focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2;
    }
    .button--outline {
        @apply border-primary-500 bg-base-200/70 dark:border-primary-600 dark:bg-base-800/70 border transition-colors;
        @apply hover:border-primary-400 dark:hover:border-primary-700;
        @apply focus-visible:ring-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2;
    }
    .button--ghost {
        @apply no-underline transition-colors;
        @apply hover:text-base-600 dark:hover:text-base-300;
        @apply focus-visible:ring-primary-500 focus-visible:ring-2;
    }

    .ks-admonition {
      border-radius: 0.375rem /* 6px */;
      border-left: 4px solid;
      padding-left: 1rem /* 16px */;
      padding-right: 1rem /* 16px */;
      padding-top: 0.75rem /* 12px */;
      padding-bottom: 0.75rem /* 12px */;
    }
    .ks-admonition__variant {
      font-weight: 700;
      text-transform: uppercase;
    }
}

@layer utilities {
    /* used with select field */
    .sr-only {
        @apply sr-only;
    }

    /* focus utility class (for when user is tabbing through items on page) */
    .primary-focus {
        @apply focus-visible:outline-primary-500 focus:outline-hidden focus-visible:rounded-xs focus-visible:outline-2;
    }

    /* main gradient. Used for tags and some headings */
    .main-text-gradient {
        @apply from-primary-800 to-primary-600 dark:from-primary-400 dark:to-primary-200 bg-gradient-to-r bg-clip-text text-transparent;
    }

    /* use with "animate-pause" to pause a CSS animation */
    .pause {
        animation-play-state: paused !important;
    }

    /* weird tailwind v4 fixes necessary for some components. These may not be necessary once it is out of beta */
    /* currently in v4 beta you cannot apply non-standard tailwind classes to elements within css layers.
  So we can't use "main-text-gradient" here, and the classes are instead copied */
    .colored-title {
        @apply from-primary-800 to-primary-600 dark:from-primary-400 dark:to-primary-200 bg-gradient-to-r bg-clip-text text-lg text-transparent;
    }

    /* start animated items visibly hidden. Once animation has started, "aos-animate" class is added to make them visible for the animation to play */
    /* all animations */
    .use-animations [data-aos] {
      @apply pointer-events-none;
      &.aos-animate {
        @apply pointer-events-auto;
      }
    }
    /* fade animations */
    .use-animations [data-aos^="fade"][data-aos^="fade"] {
      @apply opacity-0;
    }
    /* zoom animations */
    .use-animations [data-aos^="zoom"][data-aos^="zoom"] {
      @apply opacity-0;
    }
    /* slide animations */
    .use-animations [data-aos^="slide"][data-aos^="slide"] {
      @apply invisible;
      &.aos-animate {
        @apply visible;
      }
    }
    /* flip animations */
    .use-animations [data-aos^="flip"][data-aos^="flip"] {
      backface-visibility: hidden;
    }
}