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

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

@layer base {
  :root[data-theme=default] {
    --color-primary: 68 68 68;
    --color-background: 255 255 255;
    --color-text-base: 68 68 68;
    --color-text-heading: 68 68 68;
    --color-text-muted: 153 153 153;
    --color-text-dim: 204 204 204;
  }

  :root[data-theme=default][data-mode=dark] {
    --color-primary: 255 255 255;
    --color-background: 34 34 34;
    --color-text-base: 204 204 204;
    --color-text-heading: 255 255 255;
    --color-text-muted: 102 102 102;
    --color-text-dim: 68 68 68;
  }

  :root[data-theme=frame] {
    --color-primary: 91 82 254;
    --color-background: 237 238 242;
    --color-text-base: 38 43 55;
    --color-text-heading: 57 65 83;
    --color-text-muted: 57 65 83;
    --color-text-dim: 76 87 111;
  }

  :root[data-theme=frame][data-mode=dark] {
    --color-primary: 91 82 254;
    --color-background: 38 43 55;
    --color-text-base: 204 204 204;
    --color-text-heading: 204 204 204;
    --color-text-muted: 76 87 111;
    --color-text-dim: 57 65 83;
  }
}

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

.prose :where(a):not(:where([class~="not-prose"] *)) {
  @apply underline decoration-2 decoration-theme-primary;
}

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

/* Set width and color for identity icons */
svg {
  width: 1.5em;
  @apply fill-emerald-500 dark:fill-emerald-700;
}