@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "./lolight.css";
@import "./lightbox.css";

@layer base {
  :root {
    --color-primary: 16 185 129;
    --color-background: 255 255 255;
    --color-text-base: 82 82 91;
    --color-text-heading: 24 24 27;
    --color-text-muted: 82 82 91;
    --color-text-dim: 244 244 245;
  }

  :root[data-theme=roguelight] {
    --color-primary: 150 207 133;
    --color-background: 53 43 49;
    --color-text-base: 245 245 212;
    --color-text-heading: 150 207 133;
    --color-text-muted: 245 245 212;
    --color-text-dim: 74 59 68;
  }
}

/* 
  Invert prose styles based on the variant of the theme. 
*/
:root[data-variant=dark] .prose {
  @apply prose-invert;
}

/* Set appropriate width for identity icons */
a[rel] svg { 
  width: 1em;
  fill: rgb(var(--color-text-heading));
}