chiya/assets/css/app.css

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

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

@layer base {
  :root { font-family: 'Inter', sans-serif; }
  @supports (font-variation-settings: normal) {
    :root { font-family: 'Inter var', sans-serif; }
  }

  :root {
    --color-primary: 214 93 14; /* orange */
    --color-primary1: 175 58 3; /* orange faded */

    --color-secondary: 104 157 106; /* aqua */
    --color-secondary1: 66 123 88; /* aqua faded */

    --color-background: 253 244 193; /* light0 */
    --color-background1: 235 219 178; /* light1 */

    --color-foreground: 60 56 54; /* dark1 */
    --color-foreground1: 80 73 69; /* dark2 */

    --color-heading: var(--color-secondary);
    --color-code: var(--color-background1);

    @apply selection:bg-theme-primary/50;
  }

  :root[data-mode=dark] {
    --color-primary: 214 93 14; /* orange */
    --color-primary1: 254 128 25; /* orange bright */

    --color-secondary: 104 157 106; /* aqua */
    --color-secondary1: 142 192 124; /* aqua faded */

    --color-background: 40 40 40; /* dark0 */
    --color-background1: 60 56 54; /* dark1 */

    --color-foreground: 235 219 178; /* light1 */
    --color-foreground1: 213 196 161; /* light2 */

    --color-heading: var(--color-secondary);
    --color-code: var(--color-base);
  }

    :root[data-mode=dark] .prose {
    @apply prose-invert;
  }
}

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

  .alert {
    @apply p-3 mt-3 rounded;
  }

  .alert.alert-danger {
    @apply bg-red-100 text-red-500 dark:bg-red-950 dark:text-red-500;
  }

  .prose a {
    @apply underline decoration-2 decoration-theme-primary hover:bg-theme-primary hover:text-theme-background transition;
  }
}