@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 224 71.4% 4.1%;
        --card: 0 0% 100%;
        --card-foreground: 224 71.4% 4.1%;
        --popover: 0 0% 100%;
        --popover-foreground: 224 71.4% 4.1%;
        --primary: 24.6 95% 53.1%;
        --primary-foreground: 60 9.1% 97.8%;
        --secondary: 220 14.3% 95.9%;
        --secondary-foreground: 220.9 39.3% 11%;
        --muted: 220 14.3% 95.9%;
        --muted-foreground: 220 8.9% 46.1%;
        --accent: 220 14.3% 95.9%;
        --accent-foreground: 220.9 39.3% 11%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 20% 98%;
        --border: 220 13% 91%;
        --input: 220 13% 91%;
        --ring: 24.6 95% 53.1%;
        --radius: 0.5rem;
        --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;

        /* Khoj Custom Colors */
        --frosted-background-color: 20 13% 95%;
        --border-color: #e2e2e2;

        /* Imported from Highlight.js */
        pre code.hljs {
            display: block;
            overflow-x: auto;
            padding: 1em;
        }

        code.hljs {
            padding: 3px 5px;
        }

        /*!
            Theme: GitHub
            Description: Light theme as seen on github.com
            Author: github.com
            Maintainer: @Hirse
            Updated: 2021-05-15

            Outdated base version: https://github.com/primer/github-syntax-light
            Current colors taken from GitHub's CSS
          */
        .hljs {
            color: #24292e;
            background: #ffffff;
        }

        .hljs-doctag,
        .hljs-keyword,
        .hljs-meta .hljs-keyword,
        .hljs-template-tag,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable.language_ {
            /* prettylights-syntax-keyword */
            color: #d73a49;
        }

        .hljs-title,
        .hljs-title.class_,
        .hljs-title.class_.inherited__,
        .hljs-title.function_ {
            /* prettylights-syntax-entity */
            color: #6f42c1;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-literal,
        .hljs-meta,
        .hljs-number,
        .hljs-operator,
        .hljs-variable,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-id {
            /* prettylights-syntax-constant */
            color: #005cc5;
        }

        .hljs-regexp,
        .hljs-string,
        .hljs-meta .hljs-string {
            /* prettylights-syntax-string */
            color: #032f62;
        }

        .hljs-built_in,
        .hljs-symbol {
            /* prettylights-syntax-variable */
            color: #e36209;
        }

        .hljs-comment,
        .hljs-code,
        .hljs-formula {
            /* prettylights-syntax-comment */
            color: #6a737d;
        }

        .hljs-name,
        .hljs-quote,
        .hljs-selector-tag,
        .hljs-selector-pseudo {
            /* prettylights-syntax-entity-tag */
            color: #22863a;
        }

        .hljs-subst {
            /* prettylights-syntax-storage-modifier-import */
            color: #24292e;
        }

        .hljs-section {
            /* prettylights-syntax-markup-heading */
            color: #005cc5;
            font-weight: bold;
        }

        .hljs-bullet {
            /* prettylights-syntax-markup-list */
            color: #735c0f;
        }

        .hljs-emphasis {
            /* prettylights-syntax-markup-italic */
            color: #24292e;
            font-style: italic;
        }

        .hljs-strong {
            /* prettylights-syntax-markup-bold */
            color: #24292e;
            font-weight: bold;
        }

        .hljs-addition {
            /* prettylights-syntax-markup-inserted */
            color: #22863a;
            background-color: #f0fff4;
        }

        .hljs-deletion {
            /* prettylights-syntax-markup-deleted */
            color: #b31d28;
            background-color: #ffeef0;
        }

        .hljs-char.escape_,
        .hljs-link,
        .hljs-params,
        .hljs-property,
        .hljs-punctuation,
        .hljs-tag {
            /* purposely ignored */
        }
    }

    .dark {
        --background: 0 0% 14%;
        --foreground: 210 20% 98%;
        --card: 0 0% 14%;
        --card-foreground: 210 20% 98%;
        --popover: 0 0% 14%;
        --popover-foreground: 210 20% 98%;
        --popover: 20 14.3% 4.1%;
        --popover-foreground: 60 9.1% 97.8%;
        --secondary: 0 0% 9%;
        --secondary-foreground: 210 20% 98%;
        --muted: 0 0% 9%;
        --muted-foreground: 217.9 10.6% 64.9%;
        --accent: 0 0% 9%;
        --accent-foreground: 210 20% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 20% 98%;
        --border: 0 0% 9%;
        --input: 0 0% 9%;
        --ring: 20.5 90.2% 48.2%;
        --font-family: "Noto Sans", "Noto Sans Arabic", sans-serif !important;

        /* Imported from highlight.js */
        pre code.hljs {
            display: block;
            overflow-x: auto;
            padding: 1em;
        }

        code.hljs {
            padding: 3px 5px;
        }

        /*!
            Theme: GitHub Dark
            Description: Dark theme as seen on github.com
            Author: github.com
            Maintainer: @Hirse
            Updated: 2021-05-15

            Outdated base version: https://github.com/primer/github-syntax-dark
            Current colors taken from GitHub's CSS
          */
        .hljs {
            color: #c9d1d9;
            background: #0d1117;
        }

        .hljs-doctag,
        .hljs-keyword,
        .hljs-meta .hljs-keyword,
        .hljs-template-tag,
        .hljs-template-variable,
        .hljs-type,
        .hljs-variable.language_ {
            /* prettylights-syntax-keyword */
            color: #ff7b72;
        }

        .hljs-title,
        .hljs-title.class_,
        .hljs-title.class_.inherited__,
        .hljs-title.function_ {
            /* prettylights-syntax-entity */
            color: #d2a8ff;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-literal,
        .hljs-meta,
        .hljs-number,
        .hljs-operator,
        .hljs-variable,
        .hljs-selector-attr,
        .hljs-selector-class,
        .hljs-selector-id {
            /* prettylights-syntax-constant */
            color: #79c0ff;
        }

        .hljs-regexp,
        .hljs-string,
        .hljs-meta .hljs-string {
            /* prettylights-syntax-string */
            color: #a5d6ff;
        }

        .hljs-built_in,
        .hljs-symbol {
            /* prettylights-syntax-variable */
            color: #ffa657;
        }

        .hljs-comment,
        .hljs-code,
        .hljs-formula {
            /* prettylights-syntax-comment */
            color: #8b949e;
        }

        .hljs-name,
        .hljs-quote,
        .hljs-selector-tag,
        .hljs-selector-pseudo {
            /* prettylights-syntax-entity-tag */
            color: #7ee787;
        }

        .hljs-subst {
            /* prettylights-syntax-storage-modifier-import */
            color: #c9d1d9;
        }

        .hljs-section {
            /* prettylights-syntax-markup-heading */
            color: #1f6feb;
            font-weight: bold;
        }

        .hljs-bullet {
            /* prettylights-syntax-markup-list */
            color: #f2cc60;
        }

        .hljs-emphasis {
            /* prettylights-syntax-markup-italic */
            color: #c9d1d9;
            font-style: italic;
        }

        .hljs-strong {
            /* prettylights-syntax-markup-bold */
            color: #c9d1d9;
            font-weight: bold;
        }

        .hljs-addition {
            /* prettylights-syntax-markup-inserted */
            color: #aff5b4;
            background-color: #033a16;
        }

        .hljs-deletion {
            /* prettylights-syntax-markup-deleted */
            color: #ffdcd7;
            background-color: #67060c;
        }

        .hljs-char.escape_,
        .hljs-link,
        .hljs-params,
        .hljs-property,
        .hljs-punctuation,
        .hljs-tag {
            /* purposely ignored */
        }
    }
}

@layer base {
    * {
        @apply border-border;
    }

    /* Style lists by default. Overrides no list styling being applied previously. */
    ul,
    ol,
    menu {
        list-style: revert;
        padding: revert;
        margin: revert;
    }

    body {
        @apply bg-background text-foreground;
    }

    h1 {
        @apply text-4xl font-bold;
    }

    body {
        font-family: var(--font-family);
    }

    pre code.hljs {
        white-space: preserve;
    }

    a {
        text-decoration: underline;
    }

    input {
        background-color: hsla(var(--background) / 0.1);
    }
}
