@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;
  }

  :root[data-theme=gruvbox] {
    --color-primary: 175 58 3;
    --color-background: 251 241 199;
    --color-text-base :40 40 40;
    --color-text-heading: 66 123 88;
    --color-text-muted: 60 56 54;
    --color-text-dim: 102 92 84;
  }

  :root[data-theme=gruvbox][data-mode=dark] {
    --color-primary: 214 93 14;
    --color-background: 40 40 40;
    --color-text-base: 251 241 199;
    --color-text-heading: 104 157 106;
    --color-text-muted: 235 219 178;
    --color-text-dim: 189 174 147;
  }
}

/* 
  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;
}

.prose img {
  @apply rounded;
}

/* 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;
}