packages/frontend/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    sans-serif;
}

@layer base {
  :root {
    --media-cue-backdrop: blur(0px);
    --media-captions-padding: 0%;
    --video-captions-offset: 0px;
    /*--brand-color-50: #f2f0ff;*/
    /*--brand-color-100: #eeebff;*/
    /*--brand-color-200: #d4d0ff;*/
    /*--brand-color-300: #c7c2ff;*/
    /*--brand-color-400: #9f92ff;*/
    /*--brand-color-500: #6152df;*/
    /*--brand-color-600: #5243cb;*/
    /*--brand-color-700: #3f2eb2;*/
    /*--brand-color-800: #312887;*/
    /*--brand-color-900: #231c6b;*/
    /*--brand-color-950: #1a144f;*/
    /*--brand-color-default: #6152df;*/

    --color-brand-50: 242 240 255;
    --color-brand-100: 238 235 255;
    --color-brand-200: 212 208 255;
    --color-brand-300: 199 194 255;
    --color-brand-400: 159 146 255;
    --color-brand-500: 97 82 223;
    --color-brand-600: 82 67 203;
    --color-brand-700: 63 46 178;
    --color-brand-800: 49 40 135;
    --color-brand-900: 35 28 107;
    --color-brand-950: 26 20 79;
    --color-brand-default: 97 82 223;

    /*--gray-color-50: #FAFAFA;*/
    /*--gray-color-100: #F5F5F5;*/
    /*--gray-color-200: #E5E5E5;*/
    /*--gray-color-300: #D4D4D4;*/
    /*--gray-color-400: #A3A3A3;*/
    /*--gray-color-500: #737373;*/
    /*--gray-color-600: #525252;*/
    /*--gray-color-700: #404040;*/
    /*--gray-color-800: #262626;*/
    /*--gray-color-900: #171717;*/
    /*--gray-color-950: #101010;*/
    /*--gray-color-default: #737373;*/

    /*      --color-gray-50: 250 250 250;
        --color-gray-100: 245 245 245;
        --color-gray-200: 229 229 229;
        --color-gray-300: 212 212 212;
        --color-gray-400: 163 163 163;
        --color-gray-500: 115 115 115;
        --color-gray-600: 82 82 82;
        --color-gray-700: 64 64 64;
        --color-gray-800: 38 38 38;
        --color-gray-900: 23 23 23;
        --color-gray-950: 16 16 16;
        --color-gray-default: 115 115 115;*/

    --color-gray-50: 230 230 230;
    --color-gray-100: 225 225 225;
    --color-gray-200: 209 209 209;
    --color-gray-300: 202 202 202;
    --color-gray-400: 143 143 143;
    --color-gray-500: 90 90 90;
    --color-gray-600: 72 72 72;
    --color-gray-700: 54 54 54;
    --color-gray-800: 28 28 28;
    --color-gray-900: 16 16 16;
    --color-gray-950: 11 11 11;
    --color-gray-default: 105 105 105;

    /*--radius: 0.375rem;*/
    --radius: 0.5rem;
    --radius-md: 0.5rem;

    --titlebar-h: theme('height.10');

    --foreground: theme('colors.gray.800');
    --background: white;

    --brand: theme('colors.brand.300');
    --slate: theme('colors.slate.500');
    --gray: theme('colors.gray.500');
    --zinc: theme('colors.zinc.500');
    --neutral: theme('colors.neutral.500');
    --stone: theme('colors.stone.500');
    --red: theme('colors.red.500');
    --orange: theme('colors.orange.500');
    --amber: theme('colors.amber.500');
    --yellow: theme('colors.yellow.500');
    --lime: theme('colors.lime.500');
    --green: theme('colors.green.500');
    --emerald: theme('colors.emerald.500');
    --teal: theme('colors.teal.500');
    --cyan: theme('colors.cyan.500');
    --sky: theme('colors.sky.500');
    --blue: theme('colors.blue.500');
    --indigo: theme('colors.indigo.500');
    --violet: theme('colors.violet.500');
    --purple: theme('colors.purple.500');
    --fuchsia: theme('colors.fuchsia.500');
    --pink: theme('colors.pink.500');
    --rose: theme('colors.rose.500');

    --border: theme('colors.gray.200');
    --ring: theme('colors.brand.500');

    --muted: theme('colors.gray.500');
    --muted-highlight: theme('colors.gray.700');

    --paper: theme('colors.white');
    --subtle: rgba(0, 0, 0, 0.04);
    --subtle-highlight: rgba(0, 0, 0, 0.06);

    --media-card-popup-background: theme('colors.gray.950');
    --hover-from-background-color: theme('colors.gray.900');

    --media-accent-color: theme('colors.brand.400');
    --media-menu-item-hover-background: rgba(255, 255, 255, 0.1);
  }

  .dark,
  [data-mode='dark'] {
    --foreground: theme('colors.gray.200');
    --background: #070707;

    /*--brand: theme('colors.brand.300');*/
    --slate: theme('colors.slate.300');
    --gray: theme('colors.gray.300');
    --zinc: theme('colors.zinc.300');
    --neutral: theme('colors.neutral.300');
    --stone: theme('colors.stone.300');
    --red: theme('colors.red.300');
    --orange: theme('colors.orange.300');
    --amber: theme('colors.amber.300');
    --yellow: theme('colors.yellow.300');
    --lime: theme('colors.lime.300');
    --green: theme('colors.green.300');
    --emerald: theme('colors.emerald.300');
    --teal: theme('colors.teal.300');
    --cyan: theme('colors.cyan.300');
    --sky: theme('colors.sky.300');
    --blue: theme('colors.blue.300');
    --indigo: theme('colors.indigo.300');
    --violet: theme('colors.violet.300');
    --purple: theme('colors.purple.300');
    --fuchsia: theme('colors.fuchsia.300');
    --pink: theme('colors.pink.300');
    --rose: theme('colors.rose.300');

    --border: rgba(255, 255, 255, 0.1);
    --ring: theme('colors.brand.200');

    --muted: rgba(255, 255, 255, 0.4);
    --muted-highlight: rgba(255, 255, 255, 0.6);

    --paper: theme('colors.gray.950');
    --paper-highlighter: theme('colors.gray.950');
    --subtle: rgba(255, 255, 255, 0.06);
    --subtle-highlight: rgba(255, 255, 255, 0.08);
  }
}

html {
  background-color: var(--background);
  color: var(--foreground);
}

html * {
  border-color: var(--border);
}

/*h1, h2, h3, h4, h5, h6 {*/
/*    @apply text-gray-800 dark:text-gray-100*/
/*}*/

h1 {
  @apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
}

h2 {
  @apply scroll-m-20 text-3xl font-bold tracking-tight first:mt-0;
}

h3 {
  @apply scroll-m-20 text-2xl font-semibold tracking-tight;
}

h4 {
  @apply scroll-m-20 text-xl font-semibold tracking-tight;
}

h5 {
  @apply scroll-m-20 text-lg font-semibold tracking-tight;
}

h6 {
  @apply scroll-m-20 text-base font-semibold tracking-tight;
}

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--background);
}

/* Handle */
::-webkit-scrollbar-thumb {
  @apply bg-gray-700 rounded-full;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-600;
}

.code {
  @apply bg-gray-800 rounded-[--radius-md] px-2 py-1 text-sm font-mono border;
}

.JASSUB {
  position: absolute !important;
  width: 100%;
}

.force-hidden {
  display: none !important;
}

/*body[data-scroll-locked] {*/
/*    --removed-body-scroll-bar-size: 0 !important;*/
/*    margin-right: 0 !important;*/
/*    overflow-y: auto !important;*/
/*}*/

body[data-scroll-locked] .scroll-locked-offset {
  padding-right: 10px;
}

body[data-scroll-locked] .media-page-header-scroll-locked {
  /*right: 10px;*/
}

/**/

pre {
  overflow-x: auto;
}

/*div[data-media-player][data-controls]:not([data-hocus]) .vds-controls {*/
/*    @apply lg:opacity-0*/
/*}*/

.discrete-controls[data-media-player][data-playing][data-controls]:not(
    :has(.vds-controls-group:hover)
  )
  .vds-controls {
  @apply lg:opacity-0;
}

.discrete-controls[data-media-player][data-buffering][data-controls]:not(
    :has(.vds-controls-group:hover)
  )
  .vds-controls {
  @apply lg:opacity-0;
}

.discrete-controls[data-media-player][data-playing][data-seeking][data-controls]:not(
    :has(.vds-controls-group:hover)
  ) {
  @apply cursor-none;
}

.halo:after {
  opacity: 0.1;
  background-image: radial-gradient(at 27% 37%, #fd3a67 0, transparent 50%),
    radial-gradient(at 97% 21%, #9772fe 0, transparent 70%),
    radial-gradient(at 52% 99%, #fd3a4e 0, transparent 50%),
    radial-gradient(at 10% 29%, #fc5ab0 0, transparent 50%),
    radial-gradient(at 97% 96%, #e4c795 0, transparent 50%),
    radial-gradient(at 33% 50%, #8ca8e8 0, transparent 50%),
    radial-gradient(at 79% 53%, #eea5ba 0, transparent 50%);
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  filter: blur(100px) saturate(150%);
  z-index: -1;
  top: 50px;
  left: 0;
  transform: translateZ(0);
}

.halo-2:after {
  opacity: 0.1;
  background-image: radial-gradient(at 27% 37%, #fd3a67 0, transparent 30%),
    radial-gradient(at 97% 21%, #9772fe 0, transparent 70%),
    radial-gradient(at 52% 99%, #fd3a4e 0, transparent 20%),
    radial-gradient(at 10% 29%, #fc5ab0 0, transparent 20%),
    radial-gradient(at 97% 96%, #e4c795 0, transparent 20%),
    radial-gradient(at 33% 50%, #8ca8e8 0, transparent 50%),
    radial-gradient(at 79% 53%, #eea5ba 0, transparent 20%);
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  filter: blur(100px) saturate(150%);
  z-index: -1;
  top: 50px;
  left: 0;
  transform: translateZ(0);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}