@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .btn-primary {
        @apply bg-primary py-2 px-4 cursor-pointer;
    }

    .btn-secondary {
        @apply bg-secondary py-2 px-4 cursor-pointer;
    }

    .btn-tertiary {
        @apply border border-surface text-xs rounded-lg px-2 py-1;
    }

    .nav-link {
        @apply text-transparent bg-clip-text bg-gradient-to-r from-primaryshade to-primary border-b border-surface
          hover:border-overlay;
    }

    a.nav-link--active {
        position: relative;
        z-index: 1;
        @apply border-primary;
    }

    .content-container {
        @apply m-auto mx-8 md:mx-auto flex flex-col justify-between mt-8 h-full max-w-full md:w-full md:max-w-prose;
    }

    .card {
        @apply p-4 rounded-lg border border-surface;
    }

    .now-datum {
        @apply bg-mantle px-1 py-0.5 rounded font-mono text-sm;
    }

    .blog-year {
        position: relative;
        z-index: 10;
        margin-bottom: -3rem;
        cursor: default;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        overflow: hidden;
        font-size: 6rem;
        line-height: 1;
        font-weight: 700;
    }

    .blog-post-container {
        @apply mb-12;
    }

    .blog-post-container p {
        @apply my-2;
    }

    .blog-post-container hr {
        @apply my-8 border-mantle;
    }

    .blog-post-container h2 {
        @apply my-6 text-xl font-semibold;
    }
    :target, .target {
        border: 4px dotted var(--surface);
    }

    .blog-post-container h3 {
        @apply mt-2 mb-1 font-bold;
    }

    .blog-post-container blockquote {
        @apply text-subtext my-4 mx-8;
    }

    .blog-post-container blockquote > p {
        @apply my-0.5;
    }

    .blog-post-container a {
        @apply border-b border-primary hover:text-subtext;
    }

    .blog-post-container pre {
        @apply my-2 bg-mantle border-surface border rounded p-4 font-sans text-sm overflow-x-auto;
    }

    .blog-post-container p > code {
        @apply px-1 bg-mantle border border-surface rounded text-xs;
    }

    .blog-post-container ol {
        @apply list-decimal ml-8;
    }

    .blog-post-container ul {
        @apply list-disc ml-8;
    }

    table {
        @apply border-2;
    }

    table thead {
        @apply bg-mantle;
    }

    table tr {
        @apply border-2;
    }

    table td {
        @apply px-2 py-1;
    }

    .checklist > div {
        @apply flex items-center space-x-2 my-2;
    }

    .checklist input {
        @apply border-2 border-primary bg-base checked:bg-primary hover:bg-primary checked:hover:bg-primary w-6 h-6 rounded-full;
    }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@media (prefers-color-scheme: light) {
    :root {
        /* --primary: #bf72d8;
        --primaryshade: #721d8c; */
        --primary: #04a5e5;
        --primaryshade: #1e66f5;
        --secondary: #dc8a78;
        --warning: #df8e1d;
        --error: #e64553;
        --text: #4c4f69;
        --subtext: #8c8fa1;
        --overlay: #a3a6b7;
        --surface: #ccd0da;
        --mantle: #e6e9ef;
        --base: #eff1f5;
    }

    .blog-year {
        opacity: .06;
    }

    input[type='email'] {
        color: var(--text);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --primary: #ca9ee6;
        --primaryshade: #bf72d8;
        --secondary: #dd7878;
        --warning: #fff;
        --error: #f5bcbc;
        --text: #f3f3f3;
        --subtext: #a4a8ad;
        --overlay: #8c8fa1;
        --surface: #4d4d4d;
        --mantle: #343434;
        --base: #000;
    }

    .blog-year {
        opacity: .15;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    font-weight: normal;
}

html,
body {
    padding: 0;
    margin: 0;
    color: var(--text);
    background: var(--base);
}

body {
    min-height: 100vh;
    font-family: "Avenir", "Montserrat", "Corbel", "'URW Gothic'", "source-sans-pro", "sans-serif";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--primary);
}