site-profile/src/styles/global.css

@import 'tailwindcss';
@import './utilities-buttons.css';
@import './utilities-cards.css';
@import './utilities-misc.css';

@plugin '@tailwindcss/typography';
@plugin '@tailwindcss/forms';

/* Dark mode support for Tailwind CSS v4 */
/* https://tailwindcss.com/docs/dark-mode */
@custom-variant dark (&:where(.dark, .dark *));

@theme {
  /* Custom colors */
  --color-midnight: #0c354d;
  --color-ocean: #134e70;

  --color-cobalt: #6c9cb0;
  --color-steel: #4682b4;

  --color-turquoise: #0da797;
  --color-bermuda: #7fbab4;

  --color-desert: #f9deb2;
  --color-bronze: #9e7f5e;

  --color-gitea-primary: #609926;
  --color-gitea-secondary: #4c7a33;

  /* Theme colors */
  --color-main: light-dark(var(--color-steel), var(--color-bermuda));
  --color-accent: light-dark(var(--color-bronze), var(--color-desert));
  --color-active: light-dark(var(--color-orange-500), var(--color-orange-300));

  /* Text colors */
  --color-header: light-dark(var(--color-neutral-800), var(--color-neutral-200));
  --color-primary: light-dark(var(--color-neutral-600), var(--color-neutral-200));
  --color-primary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-400));
  --color-secondary: light-dark(var(--color-neutral-500), var(--color-neutral-400));
  --color-secondary-hover: light-dark(var(--color-neutral-800), var(--color-neutral-200));

  /* Object colors */
  --color-background: light-dark(var(--color-neutral-200), var(--color-stone-700));
  --color-background-accent: light-dark(color-mix(in srgb, var(--color-slate-300) 40%, transparent), color-mix(in srgb, var(--color-stone-800) 20%, transparent));
  --color-background-card: light-dark(color-mix(in srgb, var(--color-neutral-100) 80%, transparent), color-mix(in srgb, var(--color-neutral-800) 60%, transparent));

  --color-divider: light-dark(color-mix(in srgb, var(--color-slate-400) 40%, transparent), color-mix(in srgb, var(--color-neutral-500) 50%, transparent));

  /* Typography */
  --color-prose-blog-body: var(--color-neutral-700);
  --color-prose-blog-headings: var(--color-neutral-900);
  --color-prose-blog-links: var(--color-orange-300);
  
  --color-prose-blog-invert-body: var(--color-neutral-400);
  --color-prose-blog-invert-headings: var(--color-neutral-200);

  --radius-markdown-img: 0.5rem;

  /* Reveal Animations */
  --animate-reveal: reveal 0.8s ease forwards;
  --animate-reveal-fade: reveal-fade 1.8s ease forwards;

  @keyframes reveal {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes reveal-fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

@layer base {
  :root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    --theme-transition: 0.3s ease;
  }

  :root:where(.dark, .dark *) {
    color-scheme: dark;
  }

  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }

  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    overflow-y: scroll;
  }

  body {
    --swup-fade-theme-duration: 0.2s;
  }

  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }

  body,
  a,
  button {
    transition:
      background-color var(--theme-transition),
      color var(--theme-transition),
      border-color var(--theme-transition);
  }

  /* Typography */
  .prose blockquote {
    font-style: normal;
    quotes: none;
  }

  .prose img {
    @apply rounded-lg;
  }

  .prose-blog {
    --tw-prose-body: var(--color-neutral-700);
    --tw-prose-headings: var(--color-neutral-900);
    --tw-prose-lead: var(--color-neutral-700);
    --tw-prose-links: var(--color-orange-300);
    --tw-prose-bold: var(--color-neutral-900);
    --tw-prose-counters: var(--color-neutral-600);
    --tw-prose-bullets: var(--color-neutral-400);
    --tw-prose-hr: var(--color-neutral-300);
    --tw-prose-quotes: var(--color-neutral-500);
    --tw-prose-quote-borders: var(--color-neutral-300);
    --tw-prose-captions: var(--color-neutral-700);
    --tw-prose-code: var(--color-neutral-700);
    --tw-prose-pre-code: var(--color-neutral-900);
    --tw-prose-pre-bg: var(--color-white);
    --tw-prose-th-borders: var(--color-neutral-300);
    --tw-prose-td-borders: var(--color-neutral-200);

    &:where(.dark, .dark *) {
      --tw-prose-body: var(--color-neutral-400);
      --tw-prose-headings: var(--color-neutral-200);
      --tw-prose-lead: var(--color-neutral-300);
      --tw-prose-links: var(--color-orange-300);
      --tw-prose-bold: var(--color-neutral-300);
      --tw-prose-counters: var(--color-neutral-400);
      --tw-prose-bullets: var(--color-neutral-600);
      --tw-prose-hr: var(--color-neutral-700);
      --tw-prose-quotes: var(--color-neutral-500);
      --tw-prose-quote-borders: var(--color-neutral-500);
      --tw-prose-captions: var(--color-neutral-400);
      --tw-prose-code: var(--color-neutral-350);
      --tw-prose-pre-code: var(--color-neutral-300);
      --tw-prose-th-borders: var(--color-neutral-600);
      --tw-prose-td-borders: var(--color-neutral-700);
    }
  }

  /* Shiki */
  :root {
    --shiki-fg: var(--shiki-light);
    --shiki-bg: var(--color-neutral-200);
  }

  .dark {
    --shiki-fg: var(--shiki-dark);
    --shiki-bg: var(--color-neutral-800);
  }

  pre.shiki {
    background-color: var(--shiki-bg) !important;
    color: var(--shiki-fg) !important;
  }

  pre.shiki span {
    color: var(--shiki-light);
  }

  .dark pre.shiki span {
    color: var(--shiki-dark) !important;
  }
}