@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Spectral+SC:wght@500&display=swap');
@import "tailwindcss";

/* @theme {
  --color-gray-50:  oklch(0.984 0.005 220.000);
  --color-gray-100: oklch(0.968 0.010 220.000);
  --color-gray-200: oklch(0.929 0.020 222.000);
  --color-gray-300: oklch(0.869 0.035 220.000);
  --color-gray-400: oklch(0.704 0.060 218.000);
  --color-gray-500: oklch(0.554 0.070 218.000);
  --color-gray-600: oklch(0.446 0.065 218.000);
  --color-gray-700: oklch(0.372 0.060 218.000);
  --color-gray-800: oklch(0.279 0.055 220.000);
  --color-gray-900: oklch(0.208 0.050 222.000);
  --color-gray-950: oklch(0.129 0.050 222.000);
} */

:root {
  --safe-hue: var(--tw-gray-hue, 28)
}

@theme {
  --color-gray-50: oklch(0.984 0.012 var(--safe-hue));
  --color-gray-100: oklch(0.968 0.017 var(--safe-hue));
  --color-gray-200: oklch(0.929 0.025 var(--safe-hue));
  --color-gray-300: oklch(0.869 0.035 var(--safe-hue));
  --color-gray-400: oklch(0.704 0.05 var(--safe-hue));
  --color-gray-500: oklch(0.554 0.06 var(--safe-hue));
  --color-gray-600: oklch(0.446 0.058 var(--safe-hue));
  --color-gray-700: oklch(0.372 0.058 var(--safe-hue));
  --color-gray-800: oklch(0.279 0.055 var(--safe-hue));
  --color-gray-900: oklch(0.208 0.055 var(--safe-hue));
  --color-gray-950: oklch(0.129 0.055 var(--safe-hue));
}

:root {
  --link-text-color: oklch(0.5962 0.1987 var(--safe-hue));
  /* max chroma!!! use fallback*/
  /*--link-text-color: oklch(0.6 0.37 var(--safe-hue));*/
}

@layer base {
  html {
    color-scheme: light dark;
  }

  * {
    @apply border-gray-200 dark:border-gray-800;
  }

  html,
  body {
    @apply text-gray-900 bg-gray-50 dark:bg-gray-950 dark:text-gray-200;
  }

  .using-mouse * {
    outline: none !important;
  }
}

.gutter{
  scrollbar-gutter: stable both-edges;
}

@media (width >= 64rem /* 1024px */) {
  html:not(:has(.disablegutter)),
  body:not(:has(.disablegutter)) {
    scrollbar-gutter: stable both-edges !important;
  }
  html:has(.disablescroll),
  body:has(.disablescroll) {
    scrollbar-width: none;
    overflow-y: hidden;
  }
}

.lightbox:has(+.lightbox-sidebar){
  opacity: 0;
}

.scroll-thin {
  scrollbar-width: thin;
  /*scrollbar-gutter: stable both-edges !important;*/
}

.scroll-none {
  scrollbar-width: none;
}

.dangerousFediContent {
  & a[href]{
    text-decoration: none;
    color: var(--link-text-color);
    word-break: break-all;
  }
}

.font-inter {
  font-family: "Inter", sans-serif;
}
.font-roboto {
  font-family: "Roboto", sans-serif;
}

:root {
  --header-bg-light: color-mix(in srgb, var(--color-white) calc(var(--is-top) * 100%), var(--color-gray-50));
  --header-bg-dark: color-mix(in srgb, var(--color-gray-950) calc(var(--is-top) * 100%), var(--color-gray-900));
}

:root {
  --header-bg: var(--header-bg-light);
}
@media (prefers-color-scheme: dark) {
  :root {
    --header-bg: var(--header-bg-dark);
  }
}

:root {
  --shadow-opacity: calc(1 - var(--is-top));
  --tw-shadow-header: 0 2px 8px hsl(0 0% 0% / calc(var(--shadow-opacity) * 0.15));
}


/* m3 input */
:root {
  --m3input-radius: 6px;
  --m3input-border-width: .0625rem;
  --m3input-font-size: 16px;
  --m3input-transition: 150ms cubic-bezier(.2, .8, .2, 1);
  /* light theme */
  --m3input-bg: var(--color-gray-50);
  --m3input-border-color: var(--color-gray-400);
  --m3input-label-color: var(--color-gray-500);
  --m3input-text-color: var(--color-gray-900);
  --m3input-focus-color: var(--color-gray-600);
}

@media (prefers-color-scheme: dark) {
  :root {
    --m3input-bg: var(--color-gray-950);
    --m3input-border-color: var(--color-gray-700);
    --m3input-label-color: var(--color-gray-400);
    --m3input-text-color: var(--color-gray-50);
    --m3input-focus-color: var(--color-gray-400);
  }
}

/* reset page *//*
html,
body {
  background: var(--m3input-bg);
  margin: 0;
  padding: 1rem;
  color: var(--m3input-text-color);
  font-family: system-ui, sans-serif;
  font-size: var(--m3input-font-size);
}*/

/* base wrapper */
.m3input-field.m3input-label.m3input-border {
  position: relative;
  display: inline-block;
  width: 100%;
  /*max-width: 400px;*/
}

/* size variants */
.m3input-field.size-sm {
  --m3input-h: 40px;
}

.m3input-field.size-md {
  --m3input-h: 48px;
}

.m3input-field.size-lg {
  --m3input-h: 56px;
}

.m3input-field.size-xl {
  --m3input-h: 64px;
}

.m3input-field.m3input-label.m3input-border:not(.size-sm):not(.size-md):not(.size-lg):not(.size-xl) {
  --m3input-h: 48px;
}

/* outlined input */
.m3input-field.m3input-label.m3input-border input {
  width: 100%;
  height: var(--m3input-h);
  border: var(--m3input-border-width) solid var(--m3input-border-color);
  border-radius: var(--m3input-radius);
  background: var(--m3input-bg);
  color: var(--m3input-text-color);
  font-size: var(--m3input-font-size);
  padding: 0 12px;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--m3input-transition), box-shadow var(--m3input-transition);
}

/* focus ring */
.m3input-field.m3input-label.m3input-border input:focus {
  /*border-color: var(--m3input-focus-color);*/
  border-color: var(--m3input-focus-color);
  box-shadow: 0 0 0 1px var(--m3input-focus-color);
  /*box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);*/
}

/* label */
.m3input-field.m3input-label.m3input-border label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--m3input-bg);
  padding: 0 .25em;
  color: var(--m3input-label-color);
  pointer-events: none;
  transition: all var(--m3input-transition);
}

/* float on focus or when filled */
.m3input-field.m3input-label.m3input-border input:focus+label,
.m3input-field.m3input-label.m3input-border input:not(:placeholder-shown)+label {
  top: 0;
  transform: translateY(-50%) scale(.78);
  left: 0;
  color: var(--m3input-focus-color);
}

/* placeholder trick */
.m3input-field.m3input-label.m3input-border input::placeholder {
  color: transparent;
}

/* radix i love you but like cmon man */
body[data-scroll-locked]{
  margin-left: var(--removed-body-scroll-bar-size) !important;
}

/* radix tabs */

.m3tab[data-radix-collection-item] {
  flex: 1;
  display: flex;
  padding: 12px 8px;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-500);
  font-weight: 500;
  &:hover {
    background-color: var(--color-gray-100);
    cursor: pointer;
  }
  &[aria-selected="true"] {
    color: var(--color-gray-950);
    &::before{
      content: "";
      position: absolute;
      width: min(80px, 80%);
      border-radius: 99px 99px 0px 0px ;
      height: 3px;
      bottom: 0;
      background-color: var(--color-gray-400);
    }
  }
}

@media (prefers-color-scheme: dark) {
  .m3tab[data-radix-collection-item] {
    color: var(--color-gray-400);
    &:hover {
      background-color: var(--color-gray-900);
      cursor: pointer;
    }
    &[aria-selected="true"] {
      color: var(--color-gray-50);
      &::before{
        background-color: var(--color-gray-500);
      }
    }
  }
}

:root{
--thumb-size: 2rem;
--root-size: 3.25rem;

--switch-off-border: var(--color-gray-400);
--switch-off-bg: var(--color-gray-200);
--switch-off-thumb: var(--color-gray-400);


--switch-on-bg: var(--color-gray-500);
--switch-on-thumb: var(--color-gray-50);

}
@media (prefers-color-scheme: dark) {
  :root {
    --switch-off-border: var(--color-gray-500);
    --switch-off-bg: var(--color-gray-800);
    --switch-off-thumb: var(--color-gray-500);


    --switch-on-bg: var(--color-gray-400);
    --switch-on-thumb: var(--color-gray-700);
  }
}

.m3switch.root{
  /*w-10 h-6 bg-gray-300 rounded-full relative data-[state=checked]:bg-gray-500 transition-colors*/
  /*width: 40px;
  height: 24px;*/

  inline-size: var(--root-size);
  block-size: 2rem;
  border-radius: 99999px;

  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
  transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
  transition-duration: var(--default-transition-duration); /* 150ms */

  .m3switch.thumb{
    /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
    
    height: var(--thumb-size);
    width: var(--thumb-size);
    display: inline-block;
    border-radius: 9999px;

    transform-origin: center;

    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--default-transition-timing-function); /* cubic-bezier(0.4, 0, 0.2, 1) */
    transition-duration: var(--default-transition-duration); /* 150ms */
    
  }

  &[aria-checked="true"] {
    box-shadow: inset 0px 0px 0px 1.8px transparent;
    background-color: var(--switch-on-bg);

    .m3switch.thumb{
      /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/

      background-color: var(--switch-on-thumb);
      transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.72);
      &:active {
        transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88);
      }

    }
    &:active .m3switch.thumb{
      transform: translate(calc((var(--root-size) / 2) - 50%),0) scale(0.88);
    }
  }

  &[aria-checked="false"] {
    box-shadow: inset 0px 0px 0px 1.8px var(--switch-off-border);
    background-color: var(--switch-off-bg);
    .m3switch.thumb{
      /*block w-5 h-5 bg-white rounded-full shadow-sm transition-transform translate-x-[2px] data-[state=checked]:translate-x-[20px]*/
      
      background-color: var(--switch-off-thumb);
      transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.5);
      &:active {
        transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88);
      }
    }
    &:active .m3switch.thumb{
      transform: translate(calc(-1 * (var(--root-size) / 2) + 50%),0) scale(0.88);
    }
  }
}