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

@import url("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github-dark.min.css");

@font-face {
  font-family: "JetBrains Mono NL";
  src: url(asset-path("JetBrainsMono-Regular.woff2")) format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "JetBrains Mono NL";
  src: url(asset-path("JetBrainsMono-Italic.woff2")) format("woff2");
  font-weight: 400;
  font-style: italic;
}

@layer components {
  .c-button {
    @apply text-teal-800 bg-gradient-to-br from-lime-200 to-teal-200 focus:ring-4 focus:outline-none focus:ring-teal-500 font-medium rounded-lg text-sm px-5 py-2.5 text-center;
  }

  .c-button--sm {
    @apply text-xs px-3 py-2;
  }

  .c-button--lg {
    @apply px-6 py-3;
  }

  .c-button--secondary {
    @apply text-gray-700 from-gray-200 to-gray-300;
  }

  .c-button--danger {
    @apply text-white from-red-400 to-red-500 focus:ring-red-300;
  }

  /* Forms */
  .c-fields {
    @apply flex flex-col gap-6 sm:gap-8;
  }

  .c-field {
    @apply flex flex-col gap-1.5;
  }

  .c-label {
    @apply block;
  }

  .c-hint {
    @apply text-sm text-gray-400;
  }

  .c-actions {
    @apply flex flex-col sm:flex-row sm:flex-wrap gap-2;
  }

  .c-link {
    @apply text-teal-500 underline font-semibold;
  }

  .c-tag {
    @apply block text-xs rounded bg-orange-100 text-orange-600 px-2 py-0.5;
  }

  .cover--fallback-letter {
    position: relative;
    overflow: hidden;
    opacity: 0.8;

    svg {
      position: absolute;
      top: 0;
      left: 0;

      text {
        font-family: Georgia, "Times New Roman", Times, serif;
        line-height: 1;
        font-weight: 500;
      }
    }
  }

  /* THEMES */
  /* ---------------------------------- */

  .theme-article {
    &.theme-article--default {
      --theme-50: theme(colors.gray.50);
      --theme-100: theme(colors.gray.100);
      --theme-200: theme(colors.gray.200);
      --theme-300: theme(colors.gray.300);
      --theme-400: theme(colors.gray.400);
      --theme-500: theme(colors.gray.500);
      --theme-600: theme(colors.gray.600);
      --theme-700: theme(colors.gray.700);
      --theme-800: theme(colors.gray.800);
      --theme-900: theme(colors.gray.900);
      --theme-950: theme(colors.gray.950);

      --theme-text-muted: var(--theme-400);
      --theme-invert-text-muted: var(--theme-400);

      .prose {
        --tw-prose-invert-body: var(--theme-200);
      }
    }

    &.theme-article--dim {
      --theme-50: oklch(84.624% 0.00672 230.59);
      --theme-100: oklch(79.061% 0.0089 225.11);
      --theme-200: oklch(73.498% 0.01108 219.63);
      --theme-300: oklch(67.646% 0.0137 229.03);
      --theme-400: oklch(61.858% 0.01597 224.63);
      --theme-500: oklch(55.603% 0.01524 233.95);
      --theme-600: oklch(50.308% 0.01388 223.71);
      --theme-700: oklch(44.75% 0.0121 229.13);
      --theme-800: oklch(39.013% 0.01043 236.83);
      --theme-900: oklch(33.017% 0.00765 240.06);
      --theme-950: oklch(27.021% 0.00487 243.29);
    }

    &.theme-article--sepia {
      --theme-50: oklch(91.222% 0.03007 85.784);
      --theme-100: oklch(87.351% 0.04289 85.952);
      --theme-200: oklch(83.48% 0.05571 86.12);
      --theme-300: oklch(79.599% 0.06836 86.141);
      --theme-400: oklch(75.807% 0.08098 85.217);
      --theme-500: oklch(71.735% 0.09089 83.631);
      --theme-600: oklch(64.58% 0.09632 82.196);
      --theme-700: oklch(55.483% 0.08163 81.713);
      --theme-800: oklch(45.654% 0.06524 80.393);
      --theme-900: oklch(35.502% 0.04816 80.217);
      --theme-950: oklch(25.35% 0.03108 80.041);
    }
  }

  .theme-article {
    --theme-background: var(--theme-100);
    --theme-background-ui: var(--theme-50);
    --theme-border: var(--theme-300);
    --theme-text: var(--theme-900);
    --theme-text-muted: var(--theme-600);
    --theme-scroll-indicator: #0000ff;
    --theme-invert-background: var(--theme-900);
    --theme-invert-background-ui: var(--theme-950);
    --theme-invert-border: var(--theme-800);
    --theme-invert-text: var(--theme-100);
    --theme-invert-text-muted: var(--theme-600);
    --theme-invert-scroll-indicator: #3333ff;

    .theme-background {
      background-color: var(--theme-background);
    }

    .theme-background-ui {
      background-color: var(--theme-background-ui);
    }

    .theme-border {
      border-color: var(--theme-border);
    }

    .theme-text {
      color: var(--theme-text);
    }

    .theme-text-muted {
      color: var(--theme-text-muted);
    }

    .prose {
      --tw-prose-body: var(--theme-800);
      --tw-prose-headings: var(--theme-900);
      --tw-prose-lead: var(--theme-600);
      --tw-prose-links: var(--theme-900);
      --tw-prose-bold: var(--theme-900);
      --tw-prose-counters: var(--theme-500);
      --tw-prose-bullets: var(--theme-300);
      --tw-prose-hr: var(--theme-200);
      --tw-prose-quotes: var(--theme-900);
      --tw-prose-quote-borders: var(--theme-200);
      --tw-prose-captions: var(--theme-500);
      --tw-prose-code: var(--theme-900);
      --tw-prose-pre-code: var(--theme-200);
      --tw-prose-pre-bg: var(--theme-800);
      --tw-prose-th-borders: var(--theme-300);
      --tw-prose-td-borders: var(--theme-200);
      --tw-prose-invert-body: var(--theme-100);
      --tw-prose-invert-headings: #fff;
      --tw-prose-invert-lead: var(--theme-400);
      --tw-prose-invert-links: #fff;
      --tw-prose-invert-bold: #fff;
      --tw-prose-invert-counters: var(--theme-400);
      --tw-prose-invert-bullets: var(--theme-600);
      --tw-prose-invert-hr: var(--theme-700);
      --tw-prose-invert-quotes: var(--theme-100);
      --tw-prose-invert-quote-borders: var(--theme-700);
      --tw-prose-invert-captions: var(--theme-400);
      --tw-prose-invert-code: #fff;
      --tw-prose-invert-pre-code: var(--theme-300);
      --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
      --tw-prose-invert-th-borders: var(--theme-600);
      --tw-prose-invert-td-borders: var(--theme-700);
    }
  }

  @media (prefers-color-scheme: dark) {
    .theme-article {
      &.dark\:theme-article-invert {
        --theme-background: var(--theme-invert-background);
        --theme-background-ui: var(--theme-invert-background-ui);
        --theme-border: var(--theme-invert-border);
        --theme-text: var(--theme-invert-text);
        --theme-text-muted: var(--theme-invert-text-muted);
        --theme-scroll-indicator: var(--theme-invert-scroll-indicator);
      }

      .dark\:prose-invert {
        --tw-prose-body: var(--tw-prose-invert-body);
        --tw-prose-headings: var(--tw-prose-invert-headings);
        --tw-prose-lead: var(--tw-prose-invert-lead);
        --tw-prose-links: var(--tw-prose-invert-links);
        --tw-prose-bold: var(--tw-prose-invert-bold);
        --tw-prose-counters: var(--tw-prose-invert-counters);
        --tw-prose-bullets: var(--tw-prose-invert-bullets);
        --tw-prose-hr: var(--tw-prose-invert-hr);
        --tw-prose-quotes: var(--tw-prose-invert-quotes);
        --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
        --tw-prose-captions: var(--tw-prose-invert-captions);
        --tw-prose-kbd: var(--tw-prose-invert-kbd);
        --tw-prose-kbd-shadows: var(--tw-prose-invert-kbd-shadows);
        --tw-prose-code: var(--tw-prose-invert-code);
        --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
        --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
        --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
        --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
      }
    }
  }
}
/*
 * 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.
 *


 */