websites/packages/ui/styles/global.css

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

@layer base {
  :root {
    /* Session Colours */
    --session-black: #0a0a0a;
    --session-green: #00f782;
    --session-text: #dbdbdb;
    --session-text-black: #1B1B1B;
    --session-text-black-secondary: #6D6D6D;
    --session-white: #ffffff;
    --session-gradient-outline: linear-gradient(
            135deg,
            rgba(165, 218, 205, 1) 0%,
            rgba(119, 161, 151, 1) 100%
    );
    --session-gradient-green: linear-gradient(
            170deg,
            rgba(0, 251, 172, 1) 0%,
            rgba(0, 253, 187, 1) 100%
    );
    --session-gradient-gray: linear-gradient(
            170deg,
            rgba(77, 77, 77, 1) 0%,
            rgba(69, 69, 69, 1) 100%
    );
    --session-gradient-white: linear-gradient(
            163deg,
            rgba(215, 222, 218, 1) 0%,
            rgba(188, 200, 193, 1) 100%
    );
    --session-gradient-white-mock: #c6d0ca;
    --session-green-dark: #00aa59;
    --session-green-link: #008547;
    --session-disabled: #939393;

    /* Definitions */
    --background: var(--session-black);
    --foreground: var(--session-text);

    --session-gray-lightest: #adadad;
    --session-gray-lighter: #7a7a7a;
    --session-gray-light: #55595c;
    --session-gray-DEFAULT: #3a3a3a;
    --session-gray-dark: #333132;
    --session-gray-darker: #2e2e2e;

    --text-static: #dbdbdb;
    --text-gradient: linear-gradient(135deg, #ffffff -38.86%, #97a99e 133.98%);
    --text-gradient-darker: linear-gradient(
            90.71deg,
            rgba(160, 197, 181, 0.8) -0.79%,
            rgba(174, 208, 216, 0.8) 98.84%
    );

    --session-module-outline-gradient: linear-gradient(135deg, #7fb1ae 0%, #2a4337 100%);

    --session-module-gradient: linear-gradient(135deg, #0a0a0a 0%, #081b14 100%);

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 20%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 100% 61%;
    --destructive-foreground: 0 85.7% 97.3%;
    --warning: 32.39 96% 67%;
    --warning-foreground: 0 0% 98%;
    --info: 0.56 100% 48%;
    --info-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;

    --radius: 0.5rem;

    --header-height: 2.5rem;
    --header-vertical-padding: 2rem;
    --header-displacement: calc(var(--header-height) + var(--header-vertical-padding) * 2);
    --screen-without-header: calc(100vh - var(--header-displacement));

    --indicator-black: var(--session-black);
    --indicator-grey: rgb(74, 74, 74);
    --indicator-grey-lighter: var(--session-gray-lighter);
    --indicator-green: var(--session-green);
    --indicator-blue: rgb(0, 163, 247);
    --indicator-yellow: rgb(247, 222, 0);
    --indicator-red: rgb(239 68 68);

    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

/* Text Gradients */
.text-gradient-white {
  background-image: var(--session-gradient-white);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Text Selection */
::-moz-selection,
::selection {
  /* Code for Firefox */
  @apply bg-session-green text-session-black;
}

::selection {
  @apply bg-session-green text-session-black;
}

/* Glow Effect */
.glow {
  @apply drop-shadow-lg filter;
  filter: drop-shadow(0 0 8px #76fcbdac);
}

.glow-large {
  @apply drop-shadow-lg filter;
  filter: drop-shadow(0 0 16px #76fcbdac);
}

.glow-red {
  @apply drop-shadow-lg filter;
  filter: drop-shadow(0 0 8px #ff0000);
}

.glow-yellow {
  @apply drop-shadow-lg filter;
  filter: drop-shadow(0 0 8px #ffea00);
}

.fade-to-transparent-b {
  position: relative;
}

.fade-to-transparent-b::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  mask: linear-gradient(to top, transparent, var(--session-black) 7%);
  backdrop-filter: blur(8px);
}