/*
  Z-IINDEX SPECIFICATION
  |- Dropdown                     = [bk 10, dd 11]
  |- Navbar, sticky, {any}:sticky = [20]
  |- fixed, {any}:fixed           = [30]
  |- Offcanvas                    = [40]
  |- Modal                        = [50]
  |- Tooltop                      = [60]
  |- Notification                 = [70]
  |- Popup                        = [80]
*/

/* Write your global styles here, in PostCSS syntax */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --ui-brand: 80 70 230; /* #5046E6 */
    --ui-brand-active: 67 56 202; /* #4338CA */
    --ui-text-on-brand: 255 255 255; /* #FFFFFF */

    --ui-brand-soft: 80 70 230; /* #5046E6 */
    --ui-brand-soft-active: 67 56 202; /* #4338CA */
    --ui-text-on-brand-soft: 255 255 255; /* #FFFFFF */

    --ui-brand-secondary: 253 230 138; /* #FDE68A */
    --ui-brand-secondary-active: 252 211 77; /* #FCD34D */
    --ui-text-on-brand-secondary: 8 8 24; /* #080818 */

    --ui-brand-secondary-soft: 253 230 138; /* #FDE68A */
    --ui-text-on-brand-secondary-soft: 8 8 24; /* #080818 */
    --ui-brand-secondary-soft-active: 252 211 77; /* #FCD34D */

    --ui-text-default: 8 8 24; /* #080818 */
    --ui-text-muted: 

    --ui-bg-primary: 255 255 255; /* #FFFFFF */
    --ui-bg-secondary: 243 244 246; /* #F3F4F6 */
    --ui-bg-tertiary: 229 231 235; /* #E5E7EB */

    --max-width: 1408px;

    --ui-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
  }

  :root.dark {
    --ui-text-default: 229 231 235; /* #E5E7EB */
    --ui-bg-primary: 8 8 24; /* #080818 */
    --ui-bg-secondary: 22 22 38; /* #161626 */
    --ui-bg-tertiary: 32 32 48; /* #202030 */
  }

  body {
    @apply bg-primary text-default;
  }
}

.theui-shadow{
  box-shadow: var(--ui-box-shadow)
}